平滑滚动时，点击一个锚链接

我的页面上有几个超链接。一个常见问题，用户将阅读时，他们访问我的帮助部分。

使用锚链接，我可以使页面滚动到锚，并引导用户到那里。

有没有办法使滚动流畅?

但请注意，他使用的是自定义JavaScript库。也许jQuery提供了这样的功能?

当前回答

以下是我为多个链接和锚点实现的解决方案，用于平滑滚动:

http://www.adriantomic.se/development/jquery-localscroll-tutorial/ 如果你在导航div中设置了导航链接，并声明了这样的结构:

<a href = "#destinationA">

和你相应的锚标签目的地如下:

<a id = "destinationA">

然后把这个加载到文档的头部:

    <!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

<script type = "text/javascript">
 $(document).ready(function()
    {
        // Scroll the whole document
        $('#menuBox').localScroll({
           target:'#content'
        });
    });
</script>

感谢@Adriantomic

2014-12-02 18:24:52

其他回答

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

官员: http://css-tricks.com/snippets/jquery/smooth-scrolling/

2014-10-30 00:18:32

这将使jQuery很容易识别目标哈希并知道何时何地停止。

$('a[href*="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

2016-02-25 18:49:01

谢谢分享，约瑟夫·西尔伯。以下是你2018年的ES6解决方案，其中有一些小改动，以保持标准行为(滚动到顶部):

document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
  anchor.addEventListener("click", function (ev) {
    ev.preventDefault();

    const targetElement = document.querySelector(this.getAttribute("href"));
    targetElement.scrollIntoView({
      block: "start",
      alignToTop: true,
      behavior: "smooth"
    });
  });
});

2018-07-18 08:50:39

HTML

<a href="#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

或使用绝对完整的URL

<a href="https://somewebsite.com/#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

jQuery

$j(function() {
    $j('a.smooth-scroll').click(function() {
        if (
                window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&  window.location.hostname == this.hostname
        ) {
            var target = $j(this.hash);
            target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $j('html,body').animate({
                    scrollTop: target.offset().top - 70
                }, 1000);
                return false;
            }
        }
    });
});

2017-09-30 22:01:24