Animate scroll to ID on page load

问题

Im tring to animate the scroll to a particular ID on page load. I have done lots of research and came across this:

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

but this seems to start from the ID and animate to the top of the page?

The HTML (which is half way down the page) is simply:

<h2 id=\"title1\">Title here</h2>

回答1:

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);

回答2:

Pure javascript solution with scrollIntoView() function:

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

P.S. 'smooth' parameter now works from Chrome 61 as julien_c mentioned in the comments.

回答3:

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

jquery-animate-body-for-all-browsers.

回答4:

There is a jquery plugin for this. It scrolls document to a specific element, so that it would be perfectly in the middle of viewport. It also supports animation easings so that the scroll effect would look super smooth. Check this link.

In your case the code is

$("#title1").animatedScroll({easing: "easeOutExpo"});

回答5:

try with following code. make elements with class name page-scroll and keep id name to href of corresponding links

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

回答6:

for simple Scroll, use following style

height: 200px; overflow: scroll;

and use this style class which div or section you want to show scroll

来源：https://stackoverflow.com/questions/6682451/animate-scroll-to-id-on-page-load

标签

jquery

scroll

jquery-animate