单击锚点链接时平滑滚动

本文翻译自：Smooth scrolling when clicking an anchor link

I have a couple of hyperlinks on my page. 我的页面上有几个超链接。 A FAQ that users will read when they visit my help section. 用户访问我的帮助部分时将阅读的常见问题解答。

Using Anchor links, I can make the page scroll towards the anchor and guide the users there. 使用锚点链接，我可以使页面滚动到锚点并在那里引导用户。

Is there a way to make that scrolling smooth? 有没有办法使滚动平滑？

But notice that he's using a custom JavaScript library. 但是请注意，他正在使用自定义JavaScript库。 Maybe jQuery offers somethings like this baked in? 也许jQuery提供了类似的功能？

---

#1楼

参考：https://stackoom.com/question/WNgF/单击锚点链接时平滑滚动

---

#2楼

The correct syntax is: 正确的语法是：

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

Simplifying : DRY 简化 ：干

function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().​top}, 500);
}
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

Explanation of href*=\\\\# : href*=\\\\# ：

• * means it matches what contains # char. *表示它匹配包含#字符的内容。 Thus only match anchors . 因此只匹配锚点 。 For more about the meaning of this, see here 有关此含义的更多信息，请参见此处
• \\\\ is because the # is a special char in css selector, so we have to escape it. \\\\是因为#是CSS选择器中的特殊字符，因此我们必须对其进行转义。

---

#3楼

$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

this worked perfect for me 这对我来说很完美

---

#4楼

Using JQuery: 使用JQuery：

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});

---

#5楼

Adding this: 添加：

function () {
    window.location.hash = href;
}

is somehow nullifying the vertical offset 在某种程度上抵消了垂直偏移

top - 72

in Firefox and IE, ut not in Chrome. 在Firefox和IE中，而不是在Chrome中。 Basically, the page scrolls smoothly to the point at which it should stop based upon the offset, but then jumps down to where the page would go without the offset. 基本上，页面会根据偏移量平滑滚动到应停止的位置，然后向下跳转到页面没有偏移量的位置。

It does add the hash to the end of the url, but pressing back does not take you back to the top, it just removes the hash from the url and leaves the viewing window where it sits. 它确实将哈希值添加到url的末尾，但是按回去并不会使您回到顶部，它只是从url中删除哈希值，并将其保留在查看窗口中。

Here is the full js I am using: 这是我正在使用的完整js：

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

---

#6楼

I did this for both "/xxxxx#asdf" and "#asdf" href anchors 我对“ / xxxxx＃asdf”和“ #asdf” href锚均执行了此操作

$("a[href*=#]").on('click', function(event){
    var href = $(this).attr("href");
    if ( /(#.*)/.test(href) ){
      var hash = href.match(/(#.*)/)[0];
      var path = href.match(/([^#]*)/)[0];

      if (window.location.pathname == path || path.length == 0){
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
        window.location.hash = hash;
      }
    }
});