跳转到页面的特定部分

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。