How to Animate Scrolltop with Jquery

Animate scroll to ID on page load

You are only scrolling the height of your element. offset() returns the coordinates of an element relative to the document, and top param will give you the element's distance in pixels along the y-axis:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

And you can also add a delay to it:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

jQuery .scrollTop(); + animation

To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.

For example:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Where that alert code is, you can execute more javascript to add in further animation.

Also, the 'swing' is there to set the easing. Check out http://api.jquery.com/animate/ for more info.

Is it possible to animate scrollTop with jQuery?

You can just use .animate() the scrollTop property, like this:

$("html, body").animate({ scrollTop: "300px" });

How to animate scroll to div in jQuery?

i have similar action in my project and jquery code is like this:

$('html, body').animate({ scrollTop: $('#sonuc_grid').offset().top }, 'slow');

However to move to that div you need to give it a tab index like below:

<div id="sonuc_grid" tabindex=44></div>

that way browser will know where to go

jQuery animate scroll

You can animate the scrolltop of the page with jQuery.

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

See this site:
http://papermashup.com/jquery-page-scrolling/

Scroll to top of the page using jquery animate

The way is pretty simple. Put a button at the bottom of the page and write an event something like this

$('#spnTop').on("click",function() {
    $('html, body').animate({ scrollTop: 0 }, 'slow', function () {
        alert("reached top");
    });
});

Here is the fiddle for this

jquery .animate scrollTop function not working

Use preventDefault() to stop default ahref action first and it should be fine

// added e parameter to click callback
$('a[href*="#"]:not([href="#"])').click(function(e) {
  // use prevent default function
  e.preventDefault()
  var target = $(this.hash);
  if (target.length) {    
    $('html, body').animate({scrollTop: target.offset().top}, 1000);
  }       
});`

You are activating default action of the <a> tag so browser have no time to animate scroll because you are there already.

jQuery animate scrollTop goes up then back down

The problem is in your selector. I know why it's done. Any web dev that's been in this long enough has been using that for as much cross browser compat as possible, and yet still encountered this issue. The problem is, you're calling animate:scroll on 2 items consecutively using this selector.

The better way, in short, would be to check if it is a WebKit browser or not. Reason being is that non-WebKit tend to use html whereas WebKit browsers tend to use body _{(and sometime html)}. This can cause such confusion as you face now.

The simple short term solution is to use something like /WebKit/i.test(navigator.userAgent) in your click callback. This will help you assign only one selector to the animate call.

Example

var selector = /WebKit/i.test(navigator.userAgent) ? 'body' : 'html';
$(selector).animate( // ...

Test Snippet

$(function() { // simply to make filler divs for scrolling for (var i=0;i<10;i++) $('<div />', { 'id': 'div'+i, 'style': 'background-color: '+String.randColorHex()+';' }).append($('.temp').clone().removeClass('temp')).height($(window).height()).appendTo($('body')); /*------------------------------------------*/  /***S*O*L*U*T*I*O*N***/ var divID = 0; function btnCheck() { // IGNORE, simply to turn buttons on and off when reaching end  $('#btnScrollDown').prop('disabled', divID>=9);  $('#btnScrollUp').prop('disabled', divID<=0); }  $(document)  .on('click', '#btnScrollDown', function() {   if (divID < 10) {    divID++;    // broke everything down so it's easy to see. You can shorten this in a few ways./*THIS HERE-> */var selector = /WebKit/i.test(navigator.userAgent) ? 'body' : 'html',     scrollSelector = '#div' + (divID),     scrollTop = $(scrollSelector).offset().top     props = { scrollTop: scrollTop },     time = 800;    $(selector).animate(props, time);    // simply to turn buttons on and off when reaching end    btnCheck();   }  })  .on('click', '#btnScrollUp', function() {   if (divID > 0) {    divID--    // broke everything down so it's easy to see. You can shorten this in a few ways./*THIS HERE-> */var selector = /WebKit/i.test(navigator.userAgent) ? 'body' : 'html',     scrollSelector = '#div' + (divID),     scrollTop = $(scrollSelector).offset().top     props = { scrollTop: scrollTop },     time = 800;    $(selector).animate(props, time);    // simply to turn buttons on and off when reaching end    btnCheck();   }  }); });

html, body, div { margin: 0; padding: 0; width: 100%; }.buttons { display: inline-block; left: 1em; position: fixed; text-align: center; top: 1em; }button { margin: .25em; padding: .1em .3em; width: 100%; }.temp { dislpay: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="https://cdn.rawgit.com/JDMcKinstry/String.randColorHex/0c9bb2ff/String.randColorHex.js"></script><section class="buttons">  <button id="btnScrollUp" disabled>Scroll To Next Div Up</button><br />  <button id="btnScrollDown">Scroll To Next Down</button>  <sub><i>this isn't fully managed, only use buttons to scroll!</i></sub></section><table class="temp"><tr><td></td></tr></table>

jQuery smooth scroll to a div using animate

The problem is $('#'+ $href).offset();, since the href itself has #, it throws an error like Uncaught Error: Syntax error, unrecognized expression: ##howToUse

$('ul.nav').find('a').click(function (e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var $anchor = $(target).offset();
    $('body').stop().animate({
        scrollTop: $anchor.top
    }, 'slow');
});

Demo: Fiddle