Scroll position bug on one page website

1 Views

I’m having an issue whereby the scroll position isn’t going to the corresponding section of the page when being reference as an external link.

For example, when trying to access this raw URL http://wp.themechills.com/eternity/#rsvp the idea would be for the page to load on that section. What happens though, is it scrolls up to be in between the Groomsmen and Gifts section.

Read More

This same link, works perfectly when being used from the websites side navigation. For example go to http://wp.themechills.com/eternity/, then click the RSVP menu item and you will see it does in fact go to the corresponding section.

I have checked to see if there are any JS or other errors on the page, but there doesn’t appear to be any.

Can anyone assist with this?

Thanks in advance.

Leo

=============================================================================

Code Example

jQuery(document).ready(function ($) { 

function onePageNav(){
    /*-----------------------------------------------------------------------------------*/
    /*  Smooth Scroll
    /*  Thanks to: https://github.com/davist11/jQuery-One-Page-Nav
    /*-----------------------------------------------------------------------------------*/
    $(".nav").onePageNav({
        filter: ':not(.external)',
        changeHash: false,
        scrollSpeed: 1500,
    });
}

onePageNav();

function smoothScroll(){

    // Scrolls to RSVP section
    $(".js-scroll").click(function() {
        $('html, body').animate({
            scrollTop: $("#rsvp").offset().top
        }, 2000);
        return false;
    });

    return false;
}

smoothScroll();

}); 

jQuery(window).load(function(){
    if(window.location.hash) {
        var hash = window.location.hash.substring(1);
    if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
      jQuery('html, body').animate({
          scrollTop: jQuery("#"+hash).offset().top
      }, 1000);
    }
}

});

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. To achieve the same functionality as working with menu click, you can trigger the menu click event after jQuery events page load or document ready, So when page gets you can check the hash in URL and can trigger the menu with same href:

    jQuery(document).ready(function(){
  if(window.location.hash) {
      var hash = window.location.hash.substring(1);
      if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
        jQuery('a[href="#'+hash+'"]','#menu-primary').trigger('click');
      }
  }
});

    Or you can try this one to find the correct element position and then scroll to same section:

    jQuery(document).ready(function(){
  if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
      jQuery('html, body').animate({
          scrollTop: jQuery("#"+hash).offset().top
      }, 1000);
    }
  }
});

    on window load:

    jQuery(window).load(function(){
  if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    if(jQuery('a[href="#'+hash+'"]','#menu-primary').length>0){
      jQuery('html, body').animate({
          scrollTop: jQuery("#"+hash).offset().top
      }, 1000);
    }
}
});

  2. When the page loads it does position where the RSVP section is at that time. The problem is that this does not take in effect the height of all the images. Before the images load, we will say, the RSVP section is at 500px down the page. After the images load, total images height equal 1000px, now the RSVP section is around 1500px. To view the page loading play the video here. As you can see it does do as it is supposed to then the rest loads. There are a few ways to fix this.

    1) The script that scrolls to that section, make sure it executes on document ready. This may not work if there is a lazy loader or images are loaded by scripts or after document is ready. If images are loaded by scripts, the one page nav would have to be one of the last calls in document ready to work properly.

    2) use jQuery(window).load(function() {}) – This waits for all images, frames, and objects to load. This still may have an impact that may not work properly if any images or elements are increased in size after the document has fully loaded.

    3) Make sure all images/divs/spans/sections/etc… are loaded with a height. This will act like a placeholder and push the RSVP to the correct position. Quick look showed at least 5 images did not have a set height. This will not take into affect any images that are loaded by JS

  3. Use this and it will scroll you to whatever the scroll location of your element with id rsvp.

    $(document).ready(function(){

    var offset = $("#rsvp").offset();
    $("body, html").animate({scrollTop:offset.top-10});

})