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();

Answer 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>

Answer 5

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

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

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

这是密码笔JS Scroll to an Element

Answer 6

由于某些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>

Answer 7

检查以下内容：https://codepen.io/anon/pen/ePyzoj?editors=1010

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

如何使用JQuery滚动到元素？

7 个答案:

JAVASCRIPT解答：

JQUERY解答：