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>

如果我使用边距和填充，则两者之间的间隙会很大。

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

我固定了一个基本的标头，并使links标签的链接也偏离了我想要链接的地方。该解决方案确实很粗糙，但可以与良好的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;或margin-top：50px。

跳至页面的特定部分

4 个答案: