Anchar link on scroll web leads lower than id position

how to create a link to jump to a specific part of a page
html anchor id
anchor link landing in wrong position
link to specific part of page without anchor
html anchor jump to id
how to create anchor links
anchor tag scroll to id
link a div to a particular section on a different page in html

Anchor link in an "" tag:

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

Leads to a lower part than I desire:

<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>

I would like it to lead to the exact position (height) where the id="about" is located

Now, it just leads to the margin bottom of the first child element ->

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

Here is the image of the sections before I click the anchor link:

Here is the image after clicking:


@Jmainol

You have a class called spacer which generates this space.

You can go to the css file where it's defined and reduce the space.

Somewhere in a css file you have this defenition:

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

You should alter the first line padding: 8em 0;. Try to something like padding: 4em 0;

Or

You can overwrite the definition using a style tag.

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

Make sure this tag is inserted after the tage which loads the CSS file (in case that you choose this way)

Links in HTML documents, Syntax of anchor names; Nested links are illegal; Anchors with the id attribute between resources than simply "activate this link to visit that related resource". For instance, links defined by the LINK element may describe the position of a Further information is given below on using links for the benefit of search engines​. I’ve solved this by placing the anchor ID higher than the position where I want the link to land. This is imprecise and will change when you add additional content to the page. I’ve found this on more than one Divi site and using another site using a theme that comes with Visual Composer.


This https://codepen.io/titan_dl_1904/pen/wmpXNB maybe what you are looking for.

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

How to Create a Link to Jump to a Specific Part of a Page [Quick Tip], Learn how to set up a link between two pieces of content on one page using feels confusing, just follow along with the real-world examples below. But doing it right is more important than doing it wrong. you've chosen and insert it into an opening HTML anchor link tag. Close and Manage Leads. A Tale of Two Links. As you can probably guess, linking to an internal section in your page requires not one but two links. First, you want to add the link that will serve as the anchor to scroll to, then you create the standard clickable link like you normally would and direct it at the first link.


I think I discovered something to do it. Its just put for instance a br tag or empty p tag as a element inside the div with the id="about"

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

the code of the fiddle example:

<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>

Hash Tag Links That Don't Headbutt The Browser Window, The browser window will scroll itself (instantly) into such a position where the element with the ID of “section-two” is visible. It scrolls to the minimum possible  Using the id selector. In CSS, "id" is a selector that may be used to designate an area that a link should point to, similar to anchor in HTML. The nice thing about using id is that you can create a link to any element on the page, rather than only the top or bottom.


What is Anchor Link and How to Use It?, An anchor link is a link that helps to link to the content on the same It is a unique id (identifier) attached to the content block or specific element. in a matter of seconds and skip scrolling through the content they are not interested in​. It can also help you lead the visitors towards your 'Call to Action' and  When a link includes a hash, like this: <a href="#section-two"> Section Two </a>. The browser window will scroll itself (instantly) into such a position where the element with the ID of “section-two” is visible. It scrolls to the minimum possible position to make that element wholly visible. This is typically a matter of scrolling the window down, but do note that if any scrollable parent container were to require horizontal scrolling to make the element visible, the browser will do that


Creating anchor links – Squarespace Help, An anchor link (or "page jump") is a special URL that takes you to a specific place on a page. In the web address field, add: To format the landing text as something other than body text, change the <p> and </p> tags in Step 4. scrolling down to a lower header), you can use the #unique-id in your link  An anchor link (or "page jump") is a special URL that takes you to a specific place on a page. For example, the table of contents in this guide contains anchor links that take you to each header. This guide covers how to add anchor links to any block section on your site with a Code Block. Step 1 – Create a link. Add the link that visitors


Html anchor page position, Web pages are written in the hypertext mark -up language HTML. specific position on a page, place the anchor tag inside a div The id attribute may be Angular - how to link from one page to another page and scroll to an anchor in ionic Mar 23, 2017 You can then position the anchor with an offset higher or lower than  Have you ever thought to yourself “I need an anchor tag in my SharePoint navigation and that must be easy”. You blissfully open your SharePoint page, create your anchor tag link, then without a thought go into site settings, go into navigation, set the link.