Scroll Handling with Javascript

Question

I am new to web programming and I stumbled on something strange while working on my website. I use Wordpress but here I had to dive in the Javascript code to get it done.

What I want to achieve is the following: I want people to get to see the header of my website when they arrive but not be bothered by it once they read stuff on my site. What I figured out is that I want the website to scroll down if a) people are at the top of the site and b) if they click on a menu link. When people are already on the site and click on a menu item to change pages, I would like to maintain the scroll position of where they were before.

I tried two versions: This one works like a charm except that the function executes on each reload of the site

var scroll_position = localStorage.getItem('scroll_position');
var header_height = document.getElementById('masthead').offsetHeight;
var menubar_height = document.getElementById('top-bar').offsetHeight;
var page_height = header_height - menubar_height;

jQuery(function () {

    if (window.pageYOffset == scroll_position){
        jQuery(window).scrollTop(page_height);
    }
    else{
       jQuery(window).scrollTop(scroll_position);
    }
});

But as I wanted to execute the function only on clicking one of the menu items, I tried:

jQuery("#top-menu ul li a").click(function(){

    if (window.pageYOffset == scroll_position){
        jQuery(window).scrollTop(page_height);
    }
    else{
        jQuery(window).scrollTop(scroll_position);
    }

});

and suddenly the scroll_position variable doesn't change value as before...

I spend the whole day trying to figure this out and I would appreciate very much if someone out there could tell me what I'm doing wrong! Thanks in advance.

DFayet · Accepted Answer · 2015-07-24 17:37:56Z

1

According to the code you gave us, try this

jQuery(function () {
    var header_height = document.getElementById('masthead').offsetHeight;
    var menubar_height = document.getElementById('top-bar').offsetHeight;
    var page_height = header_height - menubar_height;

    jQuery("#top-menu ul li a").click(function(e){
        e.preventDefault();

        var scroll_position = localStorage.getItem('scroll_position');

        if (window.pageYOffset == scroll_position){
            jQuery(window).scrollTop(page_height);
        }
        else{
            jQuery(window).scrollTop(scroll_position);
        }
    });
});

I'm assumig that header_height, menubar_height and page_height can't get altered once the page is loaded, thats why we init them on the page load, not on the click.

Hope it's gonna help you

answered Jul 24, 2015 at 17:37

DFayet

8811 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pph Over a year ago

Thanks for your quick answer! Unfortunately, now, clicking on the menu links doesn't open the linked pages anymore. All it does is scrolling down on the same page, getting the menu on top. Moreover, the if-then-condition now always returns true so that I never get to keep my scroll position...

Collectives™ on Stack Overflow

Scroll Handling with Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related