如何在錨定導航後向下滾動頁面？

Question

我已經添加頂部菜單作爲與位置的div：固定。 它被放置在頁面的頂部，因此它覆蓋了部分內容。 我將佈局向下移動，所以一般情況下都可以，但如果用戶單擊任何錨點鏈接，頁面會滾動到錨點位於頂部的位置。但它被頂部菜單覆蓋。 有沒有辦法來捕獲錨事件和處理它與JavaScript（和jQuery，如果有必要）？

Answer 1

您可以使用這樣的事情：

$('a').click(function(){ 
    $('html').scrollTop($($(this).attr('href')).position().top + menu_height_offset) 
}) 

要獲得錨位置

$($(this).attr('href')).position().top 

爲了使偏移有關的固定菜單

menu_height_offset 

爲了使移動滾動

$('html').scrollTop() 

http://api.jquery.com/scrollTop/

http://api.jquery.com/position/

Answer 2

你需要計算元素和sroll的偏移，offset of element - height of the navigationbar - 位置：

$("a").on("click",function(){ 
    // height of the navigation bar 
    var height= $("#nav").outerHeight(); 
    // position of the referenced dom-element 
    var pos = $($(this).attr("href")).position().top; 
    // scroll to the element 
    $("body").scrollTop(pos - height); 
    // suppress default 
    return false; 
})​ 

See it in action here。

Answer 3

/* START --- scroll till anchor */ 
     (function($) { 
      $.fn.goTo = function() { 
        var top_menu_height=$('#div_menu_header').height() + 5 ; 
        //alert ('top_menu_height is:' + top_menu_height); 
        $('html, body').animate({ 
         scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px' 
        }, 500); 
        return this; // for chaining... 
      } 
     })(jQuery); 

     $(document).ready(function(){ 

      var url = document.URL, idx = url.indexOf("#") ; 
      var hash = idx != -1 ? url.substring(idx+1) : ""; 

      $(window).load(function(){ 
      // Remove the # from the hash, as different browsers may or may not include it 
      var anchor_to_scroll_to = location.hash.replace('#',''); 
      if (anchor_to_scroll_to != '') { 
       anchor_to_scroll_to = '#' + anchor_to_scroll_to ; 
       $(anchor_to_scroll_to).goTo(); 
      } 
      }); 
     }); 
    /* STOP --- scroll till anchror */