queue  18
support
Results 1 to 4 of 4

Thread: [SOLVED] Anchor tags not scrolling to correct position

  1. #1
    Junior Member
    Join Date
    Jun 2017
    Posts
    8

    Anchor tags not scrolling to correct position

    Hi, I've created anchor tags for my menu items that link to 5 homepage sections. Problem: they do not scroll to the correct position and cover up part or all of that section title. For example, when I click on "About the Artist" the page scrolls past the section title (in this example, About the Artist). Is this happening because I may have increased the height of the logo/header area? thanks!

    <div class="collapse navbar-collapse" id="navigation">
    <ul class="nav">
    <li id="menu-item-273" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-273"><a href="#reception">Art Reception Event</a></li>
    <li id="menu-item-272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-272"><a href="#about">About the Artist</a></li>
    <li id="menu-item-274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-274"><a href="#studio-tour">Open Studio Tour</a></li>
    <li id="menu-item-275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-275"><a href="#rsvp">RSVP</a></li>
    <li id="menu-item-276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-276"><a href="#contact-us">Contact Us</a></li>
    </ul>
    </div>

  2. #2
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    1,987
    Hi,

    Yes if you have increased the height of the header section this would likely be the cause. To solve this you may need to edit the theme's js. Open the js folderin the theme root folder. Find the main.js file and on line 60 you should see this:

    Code:
    scrollTop: ( loggedIn ) ? target.offset().top - 32 : target.offset().top
    So you will need to minus your header section height increase from both sides of that if else. eg. if you header increased in height by say 50px, that line would look like this:

    Code:
    scrollTop: ( loggedIn ) ? target.offset().top - 82 : target.offset().top - 50
    Save and replace the file on the server.
    Don't forget to disable js compression in the theme options panel, advanced section.

  3. #3
    Junior Member
    Join Date
    Jun 2017
    Posts
    8
    Quote Originally Posted by Donagh View Post
    Hi,

    Yes if you have increased the height of the header section this would likely be the cause. To solve this you may need to edit the theme's js. Open the js folderin the theme root folder. Find the main.js file and on line 60 you should see this:

    Code:
    scrollTop: ( loggedIn ) ? target.offset().top - 32 : target.offset().top
    So you will need to minus your header section height increase from both sides of that if else. eg. if you header increased in height by say 50px, that line would look like this:

    Code:
    scrollTop: ( loggedIn ) ? target.offset().top - 82 : target.offset().top - 50
    Save and replace the file on the server.
    Don't forget to disable js compression in the theme options panel, advanced section.
    Hi Donagh
    I followed your instructions: my header is exactly 50px higher than the default version (50px + 50px=100px), so your numbers should have worked.
    1) theme options > advanced > turned off JS compression > saved.
    2) opened main.js from the theme js folder and changed line 60 as above
    Code:
    scrollTop: ( loggedIn ) ? target.offset().top - 82 : target.offset().top - 50
    3) went back to homepage: site would not load until I turned js compression back on in theme options and saved
    4) back on homepage and no difference in scroll offset: still missing the top of each section
    5) tried different numerical combinations in line 60 and still not resolved (same in firefox, chrome and safari).

    What can I try next? thanks

  4. #4
    Junior Member
    Join Date
    Jun 2017
    Posts
    8
    Hi Donagh
    I figured out what happened. In pasting your code to main.js, I accidentally removed the short bit of code from Line 61. That's why the theme wouldn't load when JS compression was off. Now that it's replaced, your solution works. Thanks for your help in resolving this problem!