如何使用JQuery滚动到元素？

Question

我希望页面滚动到页面顶部的div。我在页面的其他部分有按钮，但是当我滚动到底部并单击该按钮时，此按钮不起作用，它没有转到页面的顶部。这是CodePen：https：//codepen.io/Filizof/pen/xygWyp ？ editors = 1010

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

Answer 1

JavaScript 有这个element.scrollIntoView()功能。

就像是：

$("#menudiv")[0].scrollIntoView()

Answer 2

JAVASCRIPT解答：

如果您想使用“纯javascript”顺利滚动到某个元素，则可以执行以下操作：

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

例如：https：//codepen.io/anon/pen/OBzbdY

注意：有关最新的浏览器支持，请参阅https://caniuse.com/#feat=scrollintoview。

JQUERY解答：

如果您想使用“ jquery”平滑滚动到某个元素，则可以执行以下操作：

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

例如：https：//codepen.io/anon/pen/MPrJjo

Answer 3

您可以使用简单的 JS 来完成此任务。scrollIntoView() 滚动到可见区域。

像这样的东西：

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();