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

如果你使用“live”事件，我猜你正在使用旧版本的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制作动画。~~

Actuall仅适用于body。你也有一个js小提琴here（我已经建立了1200px的身体以便能够看到效果）

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

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

2 个答案: