平滑滚动到 div id jQuery

javascript jquery scroll

2022-08-29 23:58:41

我一直在尝试让一个滚动到div id jquery代码正常工作。基于另一个堆栈溢出问题，我尝试了以下方法

演示 http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

但它没有奏效。它只是贴靠到 div。我也试过

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

没有进展。

答案 1

您需要对html, body

演示 http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

答案 2

如果要覆盖页面上的标准 href-id 导航而不更改 HTML 标记以实现平滑滚动，请使用以下操作（示例）：

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});