如何使用 jQuery 滚动到元素？

Posted 2023-05-09

【中文标题】如何使用 jQuery 滚动到元素？

【英文标题】：How can I scroll to an element using jQuery?

【发布时间】：2019-03-20 19:38:29

【问题描述】：

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

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

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码 .

我认为它在 3.3.1 中被删除了你可以试试这样的codepen.io/dholakiyaankit/pen/LgeRbE

终于找到你说的那个“按钮”了。打开浏览器的控制台，你会看到这个错误：Uncaught TypeError: $(...).scrollTo is not a function - 因为 jquery 没有 scrollTo 函数。

【参考方案1】：

javascript 答案

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

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

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

注意：请参阅 Can I use... Support tables for html5, CSS3, etc. 了解最新的浏览器支持...

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

---

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

“Cancelable” Smooth Scrolling

【讨论】：

与 jquery 相比，我第一次看到纯 javascript 中相同任务的代码简洁且更少。

“纯 Javascript”示例仍然使用 jQuery 来选择点击事件 - 如果您声称它是，为什么不提供 100% 纯 js 答案？

@RichardEdwards 最初的问题是关于“使用 Jquery 滚动元素”。我还提供了一个关于使用纯 javascript 滚动的答案，这样他就可以看到它是多么容易（恕我直言，甚至比 JQuery 更容易！）。如果有问题的人想将他的其余代码转换为 javascript，那么这取决于他，因为这不是问题的意义所在。

@MWD - 仍然不是“纯 js”解决方案，将纯 js 包装在 jquery 中！= 纯 js - 仍然需要 jquery - 这对于查看您的代码示例的其他人来说不清楚 - 我注意到你有现已删除以避免此类混淆。

如果您选择body,html，则滚动两次。你可以简单地使用$("html").animate()

【参考方案2】：

JavaScript 有 element.scrollIntoView() 函数。

类似：

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

【讨论】：

如果您想使用纯 JavaScript 并且不想要任何滚动动画，那么 itay 的答案很容易使用 - 请参阅 codepen.io/anon/pen/MPrbGy

【参考方案3】：

您可以使用简单的 JS 来完成这项工作。 scrollIntoView() 滚动到可见区域。

类似这样的：

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

【参考方案4】：

<script type="text/javascript" src="jquery-3.2.1.js">

替换为

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

【讨论】：

codepen 已经使用 3.3.1 - 你是说 'scrollTo' 在 3.3.1 中是新的，但在 3.2.1 中没有？更改 jquery 版本还有什么其他好处？这个答案如何解决问题？

【参考方案5】：

由于一些 markdownify 插件，我遇到了一个小问题，无论如何我不得不搜索链接的目标，所以我使用了这个解决方法。它实际上适用于各种元素选择器，在我的情况下，我的链接是 <a href="#target">some text</a>，而我的实际目标是 <a href="target"></a> 对于这种特殊情况，我可以为您提供解决方案：

var scrollAnchorSamePage = function() 
    $('a[href^="#"]').click(function() 
      event.preventDefault();
      var id  = $(this).attr("href");

      // okay lets remove the hashtag in front:
      var target = $('a[href^="' + id.substring(1, id.length) + '"]');

      // and I need a little offset due to a fixed sticky header by 140
      $('html, body').animate( scrollTop: target.offset().top - (160)  , 1000);
    );


scrollAnchorSamePage();

PS：我使用以下 jQuery 包导入，您可以在 DOM 中关闭 </body> html 标记之前添加它们。

<!-- Latest minified jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

【参考方案6】：

我稍微更新一下你的代码，应该是：

 $(document).ready(function() 
  $("#btn1").click(function()
 
   var elmnt = document.getElementById("menudiv");
   elmnt.scrollIntoView();
 );
);

滚动到一个 div/元素，它是 scrollIntoView HTML DOM 方法。它不是一个 jQuery 函数。

这里是代码笔：JS Scroll to an Element