时间戳

首页 > 解决方案 > 如何使用 jQuery 滚动到元素？

javascript - 如何使用 jQuery 滚动到元素？

问题描述

我希望页面滚动到页面顶部的 div。我有页面其他部分的按钮，但是当我滚动到底部并单击按钮时，这不起作用。它不会转到页面顶部。

这是 CodePen：https ://codepen.io/Filizof/pen/xygWyp?editors=1010

$(document).ready(function() {
    $("#btn1").click(function() {
        $("body").scrollTo("#menudiv");
    });
});

标签： javascriptjqueryhtmlcssdom

解决方案

JavaScript 答案

如果你想用“纯 JavaScript”平滑地滚动到一个元素，你可以这样做：

document.querySelector('#menudiv').scrollIntoView({
    behavior: 'smooth'
});

更多信息在这里：Element.scrollIntoView()

注意：请参阅我可以使用... HTML5、CSS3 等支持表以 获取最新的浏览器支持...

jQuery 答案

如果您想使用 jQuery 平滑地滚动到某个元素，那么您可以执行以下操作：

$(document).ready(function() {
  $(".btns").click(function() {
    $("html").animate(
      {
        scrollTop: $("#menudiv").offset().top
      },
      800 //speed
    );
  });
});

示例：https ://jsbin.com/xaciloteqe/1/edit?html,js,output

这可能对研究此主题的人有所帮助：

“可取消”平滑滚动

推荐阅读