如何使用jquery动画向下和向上滚动网页 [英] How to animate scroll down and up the webpage using jquery

问题描述

这里是jquery我从stackoverflow也。

Here is jquery i got from stackoverflow as well.

$('ul.navigation').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    $('body').animate({ scrollTop: $anchor.top });
    return false;
});

这是我的nav

<ul class="navigation">
    <li><a href="#" class="home selected">HOME</a></li>
    <li><a href="#aboutMe" class="aboutMe">ABOUT ME</a></li>
    <li><a href="#services" class="services">SERVICES</a></li>
    <li><a href="#portfolio" class="portfolio">PORTFOLIO</a></li>
    <li><a href="#something" class="something">SOMETHING TO READ</a></li>
    <li><a href="#contactMe" class="contactMe">CONTACT ME</a></li>
</ul>

它跳到正确的id，但它做动画。动画部分是我错过了。提前致谢！

It jumps on the correct id but it does animate. Animation part is what I'm missing. Thanks in advance!

推荐答案

如果我理解正确，这是你正在寻找的：

If I understand correctly, this is what you're looking for:

$(document).ready(function() {
    $('ul.navigation').on('click', 'a', function(e) {       
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    });
});

这篇关于如何使用jquery动画向下和向上滚动网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！