0

I want my page to scroll to a particular div placed inside of my webpage. I would like to experience a smooth scroll. Is getting the offset dimensions of this particular div followed by scrollTop to this particular area using JavaScript enough for doing so. For getting the smooth transition, i thought i could use setTimeout and providing it with variables before this offset x dimension. If there is any jQuery plug-in that gets the same done, please suggest. But my preference is using just JavaScript.

user2834739
  • 3
  • 3
  • The answer to your question is here: http://stackoverflow.com/questions/10063380/javascript-smooth-scroll-without-the-use-of-jquery – idmean Oct 19 '13 at 16:04

2 Answers2

0

I think jQuery is the easiest way to get a smooth scroll.

I found a good example with a demo here:

http://css-tricks.com/snippets/jquery/smooth-scrolling/

Hope it helps!

tmeloliveira
  • 105
  • 1
  • 1
  • 5
  • thanks but the size of jquery is gonna give my site some performance hiccups. – user2834739 Oct 19 '13 at 15:36
  • and the speed is the same for all the anchor links. suppose we have 30 anchor links. it's gonna take time to scroll to the first anchot link*30 time the time.:-( – user2834739 Oct 19 '13 at 15:39
0

I found a javascript plugin for smooth scroll: http://cferdinandi.github.io/smooth-scroll/

It is a small 3kb plugin. Try it out. Hope this helps.

Check out this jsfiddle for a jQuery solution: http://jsfiddle.net/HumptyDumptyEIZ/yYqxU/

The jQuery code is as follows:

 $(document).ready(function(){
     $("#top").click(function(){
        $("html, body").animate({
           scrollTop: $("#bottom").offset().top
        }, 2000);

     });

    $("#bottom").click(function(){
       $("html, body").animate({
           scrollTop: $("#top").offset().top
       }, 2000);

     });
 })
HumptyDumptyEIZ
  • 374
  • 1
  • 6
  • 18
  • @HumptyDumptyEIZ I guess the points are meaning: Thanks for answering, but it doesn't help me a lot. – idmean Oct 19 '13 at 16:02