JavaScript scrolls to div with animation

Question

I have a PhoneGap application that when it opens an HTML page, I want it to move to a specific <div> element. So far, I could do this with this script using jQuery:

 <script> $(document).delegate('.ui-page', 'pageshow', function () { var offset = $(this).find('#timeindicatordiv').offset().top; setTimeout(function () { $.mobile.silentScroll(offset); }, 0); }); </script> 

It only gives me the opportunity to go directly to a <div> , which looks a little choppy.

Is there any way to give this smooth animation?

Answer 1

You can do the following:

 var scrollToElement = function(el, ms){ var speed = (ms) ? ms : 600; $('html,body').animate({ scrollTop: $(el).offset().top }, speed); } // specify id of element and optional scroll speed as arguments scrollToElement('#timeindicatordiv', 600); 

jsfiddle / example: http://jsfiddle.net/dtR34/4/

Answer 2

Do it like this:

 $("html,body").animate({scrollTop: offset}, 600); 

Answer 3

 $('.click').click(function(l){ // prevent default action l.preventDefault(); scrollToElement( $(this).attr('href'), 2000 ); }); var scrollToElement = function(el, ms){ var speed = (ms) ? ms : 2000; $('html,body').animate({ scrollTop: $(el).offset().top }, speed); } 

 div { margin-top:1000px; } div:last-child { padding-bottom:1000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#link1" class="click">link 1</a><br /> <a href="#link2" class="click">link 2</a><br /> <a href="#link3" class="click">link 3</a><br /> <div id="link1">Link 1</div> <div id="link2">Link 2</div> <div id="link3">Link 3</div>