动画：

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

我就是这样做的。

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

适用于任何浏览器。

它可以很容易地包装成函数

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

下面是一个工作示例$（“.btn”）.click（函数）{document.getElementById（“scrollHere”）.sollIntoView（｛behavious:“smooth”｝）}).btn｛margin-bottom:500px；｝.middle｛显示：块；边距底部：500px；颜色：红色；｝<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><button class=“btn”>向下滚动</button><h1 class=“middle”>看到了吗</h1><div id=“scrollHere”>到达目的地</div>

Docs

这在没有jQuery的情况下是可以实现的：

document.getElementById("element-id").scrollIntoView();

如果您对平滑滚动效果不太感兴趣，而只是对滚动到特定元素感兴趣，则不需要使用jQuery函数。Javascript已涵盖您的案例：

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

因此，您需要做的就是：$（“selector”）.get（0）.scrollIntoView（）；

使用.get（0）是因为我们希望检索JavaScript的DOM元素，而不是JQuery的DOM元素。

更新

现在可以通过滚动选项滚动动画（参见MDN）。您甚至可以控制块的位置。除了Safari，它似乎有很大的支持

$("selector").get(0).scrollIntoView({behavior: 'smooth'});

这是我使用通用类选择器抽象ID和href的方法

$（函数）{//可在任何地方使用的通用选择器$（“.js滚动到”）.click（函数（e）{//动态获取hrefvar destination=$（this）.attr（'href'）；//阻止href=“#”链接更改URL哈希（可选）e.预防违约（）；//动画滚动到目的地$（'html，body'）.animate({scrollTop:$（destination）.offset（）.top}, 500);});});<!-- 固定导航菜单示例--><ul class=“nav”><li><a href=“#section-1”class=“nav item js scroll to”>项目1</a></li><li><a href=“#section-2”class=“nav item js scroll to”>项目2</a></li><li><a href=“#section-3”class=“nav item js scroll to”>项目3</a></li></ul>

在找到了让我的代码工作的方法之后，我想我应该把事情弄清楚一点：用于：

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

您需要在页面顶部，因为$（“#div1”）.offset（）.top将为您滚动到的不同位置返回不同的数字。如果您已经滚动到顶部，则需要指定确切的pageY值（请参阅此处的pageY定义：https://javascript.info/coordinates).

现在，问题是计算一个元素的pageY值。下面是滚动容器为主体的示例：

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

即使您滚动到某个位置，上面的函数也会返回相同的数字。现在，要滚动回该元素：

$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");