Javascript 链接跳转到顶部和底部，但平滑滚动不会'；行不通

链接跳到底部和顶部，但不会平滑滚动，即使我确信JS正在工作

JS:

HTML:

---

如果使用“live”事件，我猜您使用的是旧版本的jQuery。 由于您希望位于顶部/底部，所以您知道它们位于某些位置（顶部=0，底部=document.height）。工作jquery代码如下所示：

jQuery(document).ready(function($){

  $('#botlink').add( $('#toplink') ).on( 'click', function( e ){
    e.preventDefault();

    var $btn = $(this).attr( 'id' ).replace('#', '');
    var move_to = $btn === 'botlink' ? $(document).height() : 0;

    $('body').animate({
      scrollTop : move_to
    }, 'slow');

  });

});

当用户单击

#botlink

或

toplink

时，上面的代码会进行检查。在

move_to

变量中，它检查单击了哪个按钮（阅读“short if”），并计算页面应该何时打开。要产生工作效果，您需要同时设置、

html

和

body

的动画

---

实际上，它只在

主体上工作

。你还有一把js提琴（我已经将身体聚焦在1200像素上，以便能够看到效果）

检查一下这个提琴，它可能会对你有所帮助

在.jQuery 1.7中删除了LIVER（）./CODE >并在jQuery 1.9中删除。如果您的版本为1.7或更高，则应该考虑使用<代码> .n（）/>代码>

 <a href="#bot" id="botlink" title="Go to bottom">↓</a>
 <a href="#top" id="toplink" title="Go to top">↑</a>

jQuery(document).ready(function($){

  $('#botlink').add( $('#toplink') ).on( 'click', function( e ){
    e.preventDefault();

    var $btn = $(this).attr( 'id' ).replace('#', '');
    var move_to = $btn === 'botlink' ? $(document).height() : 0;

    $('body').animate({
      scrollTop : move_to
    }, 'slow');

  });

});

$("a[href=#top]").on("click", function (e) {
    //alert("top")
    $('html, body').animate({
        'scrollTop': 0
    }, 1000)
    event.preventDefault();
});

// Smooth scroll to bottom.
$("a[href=#bot]").on("click", function (e) {
    // alert("bottom")
    var a = $(document).height()
    $('html, body').animate({
        'scrollTop': a + 'px'
    }, 1000)
    event.preventDefault();
});