Anchor link not scrolling all the way down

  • skyhightech

    (@skyhightech)


    2 years ago

    I have added an anchor link on an Icon to act like a button in the 1st inner section so when clicked, it scrolls to the 2nd inner section. But for some reasons it scrolls down and stops just enough that the 20% of the 1st section is still showing.

    I want the anchor to scroll all the way down so it shows the full 2nd inner section just like when you use a scroll wheel to scroll and it scroll to 2nd inner section with ease.

    Any coding that can help solve this issue..

    • This topic was modified 2 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • jonsisk

    (@jonsisk)

    Sometimes you need to mess with the position of your anchor tag a bit to get the scroll to stop where you want. Try adding a little inline CSS to move the anchor up or down and see if that gets you where you want.

    Try this to move the anchor UP 150px and see where that gets you

    Add scroll-behavior: smooth to the html element in your theme’s style.css file:

    html {
  scroll-behavior: smooth;
}

    Then add an onclick attribute to the a element to scroll the About page into view:

    <a class="elementor-icon" onclick="document.querySelector('#about').scrollIntoView({behaviour:'smooth'});">
   <svg.....>
</a>

    Hope this helps.

    Moderator bcworkz

    (@bcworkz)

    What’s currently happening is there’s an apparently unused sticky section that’s causing the browser to offset the section display by the space taken up by the sticky. If the sticky were visible, everything would work correctly. If you’re not using the sticky section it should be removed.

    Michael’s suggestion may work, or it may encounter the same issue.

    jonsisk

    (@jonsisk)

    Sorry, just noticed that I forgot to escape my HTML suggestion – but you can try this if the other elements that bcworkz pointed out are necessary. This moves your anchor up 150px

    <a style="position:relative; top: -150px; display:block;"></a>

    • This reply was modified 2 years ago by jonsisk.
    Thread Starter skyhightech

    (@skyhightech)

    @bcworkz You are right.. I removed it and made it an inner section. Which did solve the issue.. Thanks for the help

    @jonsisk and @mburridge I did try offsetting by using the coding you guys provided but didn’t work.. because I made a sticky header hide behind the 1st section and made it appear in 2nd.. It was just causing it to stop because the 2nd inner section was raised up by -85px this way the sticky header and the 2nd inner section appear together.

    I’m not too good with coding so might be possible I may not be applying it correctly.

    Thanks everyone!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Anchor link not scrolling all the way down’ is closed to new replies.