Anchar link on scroll web leads lower than id position

Question

在“”标签中锚定 link：

<li class="active"><a href="#about">About</a></li>

导致比我想要的更低的部分：

<div id="home">
<!-- Slider Starts -->
<div class="banner">
<div class="caja">
    <div class="videoContainer">
      <div class="imagen-video"></div>
        <iframe src="https://www.youtube.com/embed/-LRlMcUbDwY?modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&playlist=-LRlMcUbDwY&rel=0&showinfo=1&disablekb=1&iv_load_policy=0&start=0.8" frameborder="0"></iframe>
          <div class="caption">
            <div class="caption-wrapper">
              <div class="caption-info">              
              <h1 class="animated bounceInUp">Dream Nature</h1>
              <p class="animated bounceInLeft">Feel Nature Live Adventures</p>
              <a href="https://www.youtube.com/watch?v=AfSsWDMOtOI&index=4&list=LLZKl8y7fBQ1sCqcdO79S4Rw&t=1s" class="btnfull">Full Video</a>
              <a href="#about" class="explore animated bounceInDown"><i class="fa fa-angle-down  fa-3x"></i></a>
              </div>
            </div>
          </div>
    </div>
</div>
</div>    
<!-- </div> -->
<!-- #Slider Ends -->
</div>

<!-- ABOUT US SECTION -->
<div id="about"  class="container-fluid spacer about">
<h2 class="text-center wowload fadeInUp">About Us</h2>  
  <div class="row">
  <div class="col-sm-6 wowload fadeInLeft nick">
      <img src="images/nick.jpg" alt="">
  </div>
  <div class="col-sm-6 wowload fadeInRight">
      <h2 class="subheading">Designed by professional , the benefit for creative gigs</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia vel labore, deleniti minima nisi, velit atque quaerat impedit ea maxime sunt accusamus at obcaecati dolor iure iusto omnis quis eum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis commodi odit, illo, qui aliquam dol</p>
  </div>
  </div>
</div>

我希望它指向 id="about" 所在的确切位置（高度）

现在，它只是导致第一个子元素的外边距底部->

<h2 class="text-center wowload fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">About Us</h2>

这是我点击锚点之前的部分图片 link:

这是点击后的图片：

Answer 1

这 https://codepen.io/titan_dl_1904/pen/wmpXNB 也许是您要找的。

$('#test').click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
         $('html, body').animate({
           'scrollTop':   $(href).offset().top + 150
         }, 300);
  })

Answer 2

我想我发现了一些可以做的事情。它只是将例如 br 标签或空 p 标签作为元素放入 div 中，id="about"

Here the fiddle: <script async src="//jsfiddle.net/38tq8odh/4/embed/"></script>

fiddle例子的代码：

<li><a href="#about">About</a></li>
<br><br><br><br>
<div id="about" class="container-fluid spacer about">In fact Here is the point but without text or anything
<br><br><br><br>
<p>Othertxt point</p>
<br><br><br><br><br>
  <div class="row">
  <div class="col-sm-6 wowload fadeInLeft nick animated" style="visibility: visible; animation-name: fadeInLeft;">
      <img src="images/nick.jpg" alt="">
  </div>
  <div class="col-sm-6 wowload fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
      <h2 class="subheading">Guide you My passion</h2>
      <p>I was born in Arusha and I grew up on the lower slopes of Mount Meru, which is based in Arusha NP. My tribe is Meru, which is the largest tribe in Arusha Region. Because I really love nature, I decided to go to Wildlife College in Kenya. There I got Diploma on wildlife mammals, birds, botany and geography of Tanzania and the national parks.</p>
      <p>In addition I got a driving license for carrying tourists. I have experience as a driver guide in the spectacular Northern parks and southern parks of Tanzania since 2009. I worked with several companies where I gained a lot of experience in tour operating. This made me think of starting my own company. I still do many safaris myself, as I simply love the job.</p>
      <p>My target is not only to bring the tourists in tours and safaris, but also to assist in keeping the environment clean and to do cycling tour as the part of Eco tourism without for get wildlife safaris with our experience safaris guides. This is important, because then we can save nature and keep the existent nature that my country and Africa is proud of. Also, by keeping the environment clean we will be able to continue offering cycling and wildlife safaris in the future.</p>
  </div>
  </div>
</div>

Answer 3

@Jmainol

您有一个名为 spacer 的 class 生成此 space。

您可以转到定义它的 css 文件并减少 space。

在 css 文件的某处你有这个定义：

.spacer {
  padding: 8em 0;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 0;
}

您应该更改第一行 padding: 8em 0;。尝试像 padding: 4em 0;

这样的东西

或

您可以使用样式标签覆盖定义。

<style>
     .spacer {
       padding: 4em 0; //you can also try 2em or anything that fits for your
    }
</style>

确保此标签插入到加载 CSS 文件的标签之后（以防您选择这种方式）

Anchar link on scroll web leads lower than id position

Anchar link on scroll web leads lower than id position

html

anchor