jQuery的滾動錨（像素減去一定金額）

Question

我使用下面的代碼來滾動使用jQuery到錨點：

$(document).ready(function() { 
    function filterPath(string) { 
    return string 
    .replace(/^\//,'') 
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
    .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    $('a[href*=#]').each(function() { 
    var thisPath = filterPath(this.pathname) || locationPath; 
    if ( locationPath == thisPath 
    && (location.hostname == this.hostname || !this.hostname) 
    && this.hash.replace(/#/,'')) { 
     var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = target; 
      }); 
     }); 
     } 
    } 
    }); 

    // use the first element that is "scrollable" 
    function scrollableElement(els) { 
    for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
     var el = arguments[i], 
      $scrollElement = $(el); 
     if ($scrollElement.scrollTop()> 0) { 
     return el; 
     } else { 
     $scrollElement.scrollTop(1); 
     var isScrollable = $scrollElement.scrollTop()> 0; 
     $scrollElement.scrollTop(0); 
     if (isScrollable) { 
      return el; 
     } 
     } 
    } 
    return []; 
    } 

}); 

反正讓它滾動到錨但減去一組量像素？ （在我的情況，我想它去-92px）

感謝您的幫助。

Answer 1

我必須解決這個問題我自己。您需要根據要滾動到的像素數量來調整偏移量。就我而言，我需要它在頁面上高出50個像素。所以，我從targetOffset中減去了50。

現在，這扔搖晃你的代碼部分的location.hash - 這是告訴瀏覽器其位置設置爲特定點。在所有情況下，這是一個包含您剛剛滾動到的ID的字符串。所以，它會像'#foo'。你需要保持這個，所以我們將離開它。

然而，爲了防止瀏覽器「跳」時的location.hash被設置（默認的瀏覽器操作），你只需要阻止默認動作。因此，請在動畫函數中通過完成函數傳遞事件'e'。然後只需調用e.preventDefault（）。你必須確保瀏覽器實際上正在調用一個事件，否則會出錯。所以，一個if-test可以解決這個問題。

完成。下面是修改後的代碼塊：

if (target) { 
    var targetOffset = $target.offset().top - 50; 
    $(this).click(function(event) { 
     if(event != 'undefined') { 
      event.preventDefault();} 
     $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) { 
      e.preventDefault(); 
      location.hash = target; 
     }); 
    }); 
    } 

Answer 2

這是我使用：

function scrollToDiv(element){ 
    element = element.replace("link", ""); 
    $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow'); 
}; 

...其中50是增加像素數/減。

Answer 3

我無法使用喬納森野人的解決方案，我不能沒有錯誤傳遞事件回調到動畫（）。我今天有這個問題，並發現了一個簡單的解決方案：

 var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top - 92; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = targetOffset; 
      }); 
     }); 

減去你的像素從targetOffset可變偏移，然後分配到的location.hash該變量。滾動到目標散列時停止頁面跳轉。

Answer 4

笑）

<span class="anchor" id="section1"></span> 
 
<div class="section"></div> 
 

 
<span class="anchor" id="section2"></span> 
 
<div class="section"></div> 
 

 
<span class="anchor" id="section3"></span> 
 
<div class="section"></div> 
 

 
<style> 
 
.anchor{ 
 
    display: block; 
 
    height: 115px; /*same height as header*/ 
 
    margin-top: -115px; /*same height as header*/ 
 
    visibility: hidden; 
 
} 
 
</style>

Answer 5

在我的網站尊重我這個代碼工作的任何鏈接錨「150像素」高度之上修復菜單。

<!-- SMOOTH SCROLL --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(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-150 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 
<!-- End of SMOOTH SCROLL --> 

Answer 6

這是一個jQuery實現，我使用的是基於НикитаАндрейчук的解決方案。像素調整變量可以用這種方式動態設置，儘管在這個例子中它是硬編碼的。

$('a').each(function() { 
    var pixels = 145; 
    var name = $(this).attr('name'); 
    if (typeof name != 'undefined') { 
     $(this).css({ 
      'display' : 'block', 
      'height'  : pixels + 'px', 
      'margin-top' : '-' + pixels + 'px', 
      'visibility' : 'hidden' 
     }); 
    } 
}); 

Answer 7

這是我使用的。根據需要設置偏移量。

$('a[href^="#"]').click(function(e) { 
    e.preventDefault(); 
    $(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50}); 
});