單擊錨點鏈接時平滑滾動

本文翻譯自：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;
      }
    }
});