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

Links jump to top and bottom but smooth scrolling doesn't work

本文关键字：滚动 平滑 不起作用 顶部 底部 链接      更新时间：2023-09-26

链接会跳到底部和顶部，但不会平滑滚动，即使我确信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>

如果使用"实时"事件，我猜您使用的是旧版本的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的动画

实际上它只适用于body。你在这里也有一个js小提琴（我已经将身体聚焦在1200px上，以便能够看到效果）

检查这个小提琴，它可能会帮助你

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();
});
相关文章：