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

Question

<分区>

Answer 1

我会将链接样式设置为看起来像按钮，因为这样就没有 js 后备。

---

这就是使用 jquery 制作跳跃动画的方法。 No-js fallback 就是正常的跳转，没有动画。

原始示例:

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