0

I am building a wordpress page and have a landing page divided into several sections which I want to smoothly scroll to by using a jQuery function to animate the jump.

For this I am using a fixed header navigation pointing to the appropriate anchors:

<div class="nav-fold nav-fold-hide">
    <ul>
        <li><a id="scrolltop" href="<?php echo home_url(); ?>#scrolltop">Home.</a></li>
        <li><a id="scrollabout" href="<?php echo home_url(); ?>#scrollabout">About.</a></li>
        <li><a id="scrollwork" href="<?php echo home_url(); ?>#scrollwork">Work.</a></li>
        <li><a id="scrollbot" href="<?php echo home_url(); ?>#scrollbot">Contact.</a></li>
    </ul>
</div>

These anchors look like this:

<div class="base-headline">
    <a name="scrollwork"><h2>WORK.</h2></a>
</div>
<div class="base-work"> some content </div>

And the jQuery to make it scroll smoothly is this (taken from another question on here):

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');

}
function smoothScroll() {
    $("#scrollwork").click(function(){
        scrollToAnchor('scrollwork');
    });
};

Now this works exactly as desired as long as I am on my landing page (where the anchors point to), however if I am on another page and click on my navigation it will only go back to the landing page but remain right at the top without scrolling down.

I have (amongst many others) tried this answer, however then it will only scroll if I am coming from another page and nothing will happen if the link is clicked on the main (landing) page.

How can I smoothly scroll to an anchor on my landing page no matter where I am coming from?

EDIT: So I have managed to make it work a bit better, yet still not as intended:

First off I removed the IDs of the navigation items and put them on the target anchor (I guess thats where the weird little scroll mentioned in the comments came from). Secondly I added a class to all my navigation links to target them more easily.

Furthermore I have changed my jQuery code a bit:

// smooth scroll
function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');

}

function smoothScroll() {
    $(".opsg_smoothscroll").click(function(){
        var opsg_target = $(this).attr('href').split('#');
        console.log( "hash =" + opsg_target)
        scrollToAnchor(opsg_target.toString().substring(1));
    });

};

This now will show the appropriate section of my landing page, no matter where I am coming from (within my page obviously). Unfortunately there are still a few errors I have so far not been able to get rid of:

  • It doesn't scroll but rather just loads at the position of the anchor
  • It throws up an error of "cannot read property 'top' of undefined" before switching back to the landing page and showing the section it was pointed to

I have no idea where the second error comes from but I am guessing the first one is because of me changing the page and therefore the offset is immediately put in place instead of being animated?

Oliver Prenzel
  • 31
  • 2
  • 10
  • You need to implement *both* the code that you currently have *and* the one from the answer that checks the URL for a `#` and scrolls after the page is opened, not either or. –  Nov 08 '18 at 14:55
  • I have tried that but it unfortunately does not work. If I now return to the landing page from elsewhere it will only scroll a bit from the top but not all the way to the anchor. It seems like no matter the target it has there is some kind of offset that will get scrolled, but no more and no less. – Oliver Prenzel Nov 08 '18 at 15:03
  • Please post the full code you've tried, so we can take a look. It sounds like you're scrolling too early, when the document isn't fully loaded yet. –  Nov 08 '18 at 15:10
  • I used the exact code from the accepted answer for [this](https://stackoverflow.com/questions/9652944/jquery-scroll-to-id-from-different-page) question plus the above mentioned function to scroll smoothly. – Oliver Prenzel Nov 08 '18 at 15:21
  • I just realised that the code from the linked answer throws up an error where it says "cannot read property 'top' of undefined" so i guess thats where the fault lies. I will have another look at that. (Or maybe you can suggest where this error comes from?) – Oliver Prenzel Nov 08 '18 at 15:25
  • Regarding your edit, the first error occurs because due to the JS error, the link is handled as usual, meaning the browser will simply jump to the target. This seems to work: https://jsfiddle.net/khrismuc/Ltfw7zdo/ –  Nov 08 '18 at 18:19

0 Answers0