無法從固定菜單項目順利滾動到工作

我在my web site上使用以下Javascript來創建平滑滾動效果，當用戶單擊聯繫我們鏈接時，滾動到頁腳中的聯繫人信息。我從Devin Sturgeon對CSS-Tricks post on smooth scrolling的評論中得到了這段代碼片段。我唯一的猜測是，問題是由於錨鏈接不在固定位置，而是在固定菜單中。據後，該段應通過剪切和粘貼在它只是工作。無法從固定菜單項目順利滾動到工作

<script type="text/javascript"> 
    $('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; 
      } 
     } 
    }); 
</script>

來源

2013-07-08 Brandon McPeak

請發佈您的菜單和目標項目的HTML。它們對於它是否會起作用至關重要。爲了完整起見，請確保在執行此代碼之前將jQuery加載到您的頁面**，並且此代碼在** 的所有HTML元素之後**。 – FakeRainBrigand

@FakeRainBrigand它將代碼移過所有html元素並將其添加到ready事件後工作。感謝您的輸入！ –

把它放在身體的盡頭是很好的，因爲瀏覽器是從上到下的。如果您的代碼位於底部，則會在HTMl已經解析並顯示後加載它，這可以讓用戶不會長時間盯着白色屏幕。這通常是一個好習慣。 – FakeRainBrigand

所以您單擊處理程序不被任何DOM元素上設置這一行$('a[href*=#]:not([href=#])')將返回一個空集。瀏覽器正在使用舊時尚定位標記<a name="contact"> </a>進行滾動。

@FakeRainBrigand是正確的，當您添加您的點擊處理程序時，您的文檔未被完全加載。只需將其添加到準備好的事件。

$(document).ready(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 - 181 
        }, 1000); 
        return false; 
       } 
      } 
     }); 

});

來源

2013-07-09 01:07:13 Ceres

照顧它。謝謝！ –

無法從固定菜單項目順利滾動到工作

回答

相關問題