如何在着陆页菜单上制作 jQuery 从上到下和从下到上滚动的慢速动画

Question

我正在创建一个着陆页网站。 Nav link 在点击它时工作，它会先到底部，然后再从下到上。但我想用 jQuery 动画让它变慢。请检查我的代码并告诉我哪里错了。谢谢。

// Smooth Scrolling nav links
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top,
        scrollBottom: target.offset().bottom
    }, 1000);
} });

Answer 1

代码很好并且有效，你只是忘了在 target.offset().top

后面加逗号

在此处查看演示：https://jsfiddle.net/L02tck8x/

Answer 2

您也可以像下面这样尝试

HTML:

 Link: <a href="#toBottom" class="toBottom">Scroll to Bottom &darr;</a>
 Target: <a name="toBottom"></a>

 Link: <a href="#toTop" class="toTop">Scroll to TOP &uarr;</a>
 Target: <a name="toTop"></a>

JS

$('.toTop ').click(function(){
  $("html, body").animate({ scrollTop: 0 }, 600);
  return false;
});
$('.toBottom').click(function(){
  $('html,body').animate({scrollTop: $(document).height()}, 600);
  return false;
});

如何在着陆页菜单上制作 jQuery 从上到下和从下到上滚动的慢速动画

How to make jQuery Scrolling Top to bottom and Bottom to Top Slow Animation on Landing page menu

html

javascript

css

jquery

jquery-animate