跳轉到頁面的特定部分

Question

我已經在我的 Shopify 主題上嘗試了一個簡單的“功能”，我想要一個鏈接跳轉到頁面的特定部分 - 非常簡單，我已經這樣做了。

<a href="#jumpto">Jump to section</a>

<span id="jumpto">The section i want to jump to</span>

它就像一個魅力，但是！ 我有一個粘性標題，其中隱藏了“我想跳轉到的部分”。 有沒有什么辦法，用css，把它向下推一點，這樣“我想跳到的部分”就會顯示在標題的正下方。

基本上我希望span元素出現在標題下方，例如 50px。

我的設置看起來像這樣

<div id="sectiona">
</div>

<span id="jumpto">The section i want to jump to</span>
<div id="sectionb">
</div>

如果我使用邊距 og 填充，則兩者之間的差距會很大。

Answer 1

您可以使用 JavaScript 來解決您的問題並平滑滾動。

$('a[href*="#"]').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 50
    }, 500);
    return false;
});

Answer 2

這可能不是最漂亮的解決方案，但它應該可以解決問題。 通過將空跨度 ( .jump-marker ) 作為跳躍點，您可以偏移錨點跳轉到的位置。

.jump-marker {
  position: absolute;
  margin: -120px 0 0;
}

您還可以使用 JS/jQuery 通過標題高度來偏移滾動距離，並允許平滑滾動，這更令人賞心悅目，但這不是要求的！ :)

例子：

 body { padding-top: 120px; } header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255,0,0,0.25); height: 100px; } .more-content { height: 1000px; background: #f7f7f7; } section { position: relative; } .jump-marker { position: absolute; margin: -120px 0 0; }

 <header></header> <a href="#jumpto">Jump to section</a> <div class="more-content"></div> <section> <div class="section-content"> <span id="jumpto" class="jump-marker"></span> The section i want to jump to </div> </section> <div class="more-content"></div>

Answer 3

我固定了一個基本的標題，並使鏈接標簽鏈接從我想要鏈接的地方偏移。 這個解決方案非常粗糙，但可以使用良好的 CSS 並放置 html：

<div class="jumpTo">
    <a id="0">0</a>
</div>
<h2>0</h2>

css：

.jumpTo{
  margin-bottom: 100px;
  font-size: 0;
}

https://jsfiddle.net/ovcx2t9z/

或基於 Jquery 解決方案的小提琴

您可以使用 JavaScript 來解決您的問題並平滑滾動。

$('a[href*="#"]').click(function(){
   $('html, body').animate({
       scrollTop: $( $(this).attr('href') ).offset().top - 50
   }, 500);
   return false;
});

https://jsfiddle.net/qy03xb1r/2/

Answer 4

頁面是如何布局的？ 您是否嘗試過使用填充或邊距調整，例如 .. padding-top:50px; 或邊距頂部：50px。