javascript 如何使用 JQuery 滚动到元素？

How to scroll to an element using JQuery?

提问by itay zohar

I want the page to scroll to a div that's the at the top of the page. I have buttons for others part of the page but this isn't working when I scroll to the bottom and click on the button, it doesn't go to the top of the page. Here is the CodePen: https://codepen.io/Filizof/pen/xygWyp?editors=1010

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

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

回答by MWD

JAVASCRIPT ANSWER:

JAVASCRIPT 答案：

If you would like to scroll to an element smoothly with "pure javascript" you could do something like this:

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

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

example: https://codepen.io/anon/pen/OBzbdY

示例：https: //codepen.io/anon/pen/OBzbdY

NOTE: Please see https://caniuse.com/#feat=scrollintoviewfor latest browser support..

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

---

---

JQUERY ANSWER:

查询答案：

If you would like to scroll to an element smoothly using "jquery" then you could do something like:

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

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

example: https://codepen.io/anon/pen/MPrJjo

示例：https: //codepen.io/anon/pen/MPrJjo

回答by itay zohar

JavaScript has element.scrollIntoView()function.

JavaScript 有element.scrollIntoView()函数。

something like:

就像是：

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

回答by Shireesha Parampalli

You can use simple JS to get this done. scrollIntoView() scrolls to visible area.

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

Something like this:

像这样的东西：

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

回答by JasParkety

I had a little problem due to some markdownify plugin, anyway I had to search for the link's target so I used this work around. Its actually working for a variety of element selectors, in my case my link was <a href="#target">some text</a>and my actual target was <a href="target"></a>for this particular case I can give you that solution:

由于一些 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: I use following imports of jQuery packages, you can add them right before your closing </body>html tag in your DOM.

PS：我使用以下 jQuery 包的导入，您可以</body>在 DOM 中关闭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>

回答by Chnkz

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

replace with

用。。。来代替

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

回答by Qammar Feroz

I update your code a little bit, it should be

我稍微更新了你的代码，应该是

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

To scroll to a div/element, it is scrollIntoView HTML DOM method, it is not a JQuery function.

要滚动到 div/元素，它是 scrollIntoView HTML DOM 方法，它不是 JQuery 函数。

Here is the code pen JS Scroll to an Element

这是代码笔JS Scroll to an Element

回答by Roy Bogado

Check this: https://codepen.io/anon/pen/ePyzoj?editors=1010

检查这个：https: //codepen.io/anon/pen/ePyzoj?editors=1010

 $("#btn1").click(function() {
   $([document.documentElement, document.body]).animate({
        scrollTop: $("#menudiv").offset().top
    }, 2000);
  });