1

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

HTML：

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

JavaScript：

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

    return false;
});

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

例子：

<div class="about">
    <h3>About</h3>
    ...
    ...
    ...
</div> <!-- end .about -->
4

2 回答 2

3

给出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;
  });
});

小提琴

这个功能的伟大之处在于它是可重复使用的

于 2013-08-23T03:12:16.833 回答
1

如果您可以不使用动画，则可以选择答案，即只需将您想要的元素提供给 ID 并使用 href="#the_id_you_placed" 引用它

对于动画，您仍然可以使用 ID，但要找到偏移量并在那里设置动画：

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

    return false;
});
于 2013-08-23T03:19:29.423 回答