Question

我有以下脚本，允许我添加一个附加到我的HTML文档的.class的锚链接，然后在点击时将用户滚动到网页上的某个位置。

HTML：

<li class="about-scroll">About</li>

JavaScript的：

$('.about-scroll').click(function () {
    $('body,html').animate({
        scrollTop: 646
    }, 1600);

    return false;
});

然而，这很好用，因为内容并不总是静态的（下拉式手风琴，响应式布局等），我如何能够滚动到特定的#div或{{1}标签而不是页面上的数字值？

示例：

section

Answer 1

给h3 id一个标题。然后，您将使用href="#header"

引用点击事件

HTML

<h3 id="hi">HIIIIII</h3>
<a href="#hi">Scroll to Top</a>

的jQuery

$('a').on('click', function (e) {
  e.preventDefault();                 // prevents default action of <a>
  var target = this.hash,             // gets the href of the <a>
      $target = $(target);            // puts it as a selector
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top // scrolls to the top of the element clicked on
    }, 900, 'swing', function () {
    window.location.hash = target;
  });
});

Fiddle

关于这个功能的好处是它可以重复使用

Answer 2

如果你没有动画就可以了，你可以回答说只需要给你想要去的ID元素并用href =“＃the_id_you_placed”

引用它。

对于动画，你仍然可以使用ID，但找到偏移和动画到那里：

$('.about-scroll').click(function () {
    $('body,html').animate({
        scrollTop: $('#the_id_you_placed').offset().top
    }, 1600);

    return false;
});

.js ScrollTop转换为div或section标签

2 个答案: