链接跳转到顶部和底部，但平滑滚动不起作用

Question

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

JS：

$.fn.ready(function() { 

      // Smooth scroll to top. 
      $("a[href=#top]").live("click", function(e) { 
       $("html,body").animate({scrollTop:0}, 1000); 
       e.preventDefault(); 
      }); 

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

HTML：

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

Answer 1

我想如果你用 “活” 事件您使用的是旧版本的jQuery。 既然你想上/下，你知道他们在某些位置（top = 0，bottom = 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设置动画。

实际上它只在body上有效。你也有一个js小提琴here（我foced身体上1200像素成长为能够看到效果）

Answer 2

检查这个拨弄它可以帮助你

Js Fiddle

$("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(); 
});