如何使用jquery向下滚动和向上滚动网页

时间:2014-03-09 12:53:59

标签: javascript jquery html css scroll

这是我从stackoverflow获得的jquery。

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

这是我的导航

<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,但它会生成动画。动画部分是我所缺少的。提前致谢!

1 个答案:

答案 0 :(得分:1)

如果我理解正确,这就是你要找的东西:

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