jQuery平滑滾動從外部鏈接

Question

我正在走出我的怪胎，試圖弄清楚這一點，相對地是一個noob，所以我原諒我，如果這是超級簡單。

我有一個固定的標題，我想出瞭如何減去函數中標題的高度。當我在同一頁面上點擊鏈接時，平滑滾動效果非常好。當我從外部頁面點擊相同的鏈接時，它會加載，但無法識別關閉標題。

Ex。

<a href="mypage#link1"> clicked on http://mypage/ = correct results 

<a href="mypage#link1"> clicked on http://mypage/other_page = incorrect results 

jQuery(document).ready(function($) { 

    $(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 - 81 
      }, 800); 
     return false; 
     } 
    } 

    }); 

    }); 

}); 

我相信，我失去了一些東西，我認爲如果聲明應包括一個條件檢查，然後的事實，它是從另一個頁面來處理。儘可能容易，它踢我的，但！所以在這裏的任何幫助將不勝感激。謝謝。

Answer 1

據我所知，您只能捕捉該頁面上的鏈接上的點擊事件......當單擊不同頁面上的鏈接時，該功能無效，因爲目標上沒有點擊事件頁面（並且始發頁面完全無法控制目的地）...

因此，您需要在頁面加載時捕獲散列（即直接在jQuery(document).ready()函數內部）並在其中執行滾動動畫。

此外，您可能需要防止瀏覽器在您甚至有機會進行動畫製作之前「自動」滾動到目標滾動點 - 這可能是您現在看到的，因爲這是默認行爲AFAIK自命名錨點之後的所有瀏覽器。

你可以去有關方法有兩種：不是命名錨，該瀏覽器將不原生地識別其他

1. 使用的東西......這將意味着不支持你最終出任何與瀏覽器的習慣優雅地降級（即，它們根本不會滾動到正確的點）
2. 在頁面加載時將滾動位置重置爲（0,0），然後再做動畫。可能有必要將其封裝在setTimeout中，延遲時間爲1ms，以使其在瀏覽器中正常工作。

這在Firefox，可能其他瀏覽器也：

jQuery(document).ready(function($) { 
    $(function() { 
     var target = $('[name=' + location.hash.slice(1) +']'); 
     if (target.length) { 
      $('html,body').css({ 
       scrollTop: 0 
      }).animate({ 
       scrollTop: target.offset().top - 81 
      }, 800); 
     } 
     $('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 - 81 
        }, 800); 
        return false; 
       } 
      } 
     }); 
    }); 
});