jQuery从按钮onclick跳转或滚动到页面上的某个位置,div或目标

Question

当我点击一个按钮时,我希望能够跳到或滚动到页面上的特定div或目标.

$('#clickMe').click(function() {
    //jump to certain position or div or #target on the page
});

我怎样才能做到这一点？

Answer 1

我会将一个链接看起来像一个按钮,因为这样就有一个no-js后备.

这就是你可以使用jquery为跳转设置动画的方法.No-js后退是没有动画的正常跳跃.

原始示例:

jsfiddle

$(document).ready(function() {
  $(".jumper").on("click", function( e ) {

    e.preventDefault();

    $("body, html").animate({ 
      scrollTop: $( $(this).attr('href') ).offset().top 
    }, 600);

  });
});

#long {
  height: 500px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Links that trigger the jumping -->
<a class="jumper" href="#pliip">Pliip</a>
<a class="jumper" href="#ploop">Ploop</a>
<div id="long">...</div>
<!-- Landing elements -->
<div id="pliip">pliip</div>
<div id="ploop">ploop</div>

链接的实际按钮样式的新示例,只是为了证明一点.

一切都基本相同,不同之处在于我改变类.jumper来.button和我加CSS样式,以使链接看起来像按钮.

Button styles example

Answer 2

$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used