Offsetting jQuery page scrolls

Welcome back to answering another question from the webbies. Back again to the Adobe community and a DreamWeaver user that is asking how to offset the jQuery plug-in page scroll animation. Before trying to solve the issue, let's try to understand it. The

Welcome back to answering another question from the webbies. Back again to the Adobe community and a DreamWeaver user that is asking how to offset the jQuery plug-in page scroll animation. Before trying to solve the issue, let’s try to understand it. The developer created a responsive website with a header that is above the content of the page. When animating to the desired section, the section gets hidden as it’s behind the header. The developer wants to offset the animation to account for this offset of the header.

When the video was created we assumed a non responsive design and the video covers that topic. In the copy below you will find how to solve this issue when working with a responsive design.

 

What’s in the code:

 

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

In the heart of the JavaScript here is the lines that listen to links that have a class named ‘page-scroll’. They are bound to the jQuery animation where the developer asks the code to bound its animation to the current value that is inside the href value. In the href value there are hashtags with ids of elements on the page. jQuery then animates to the position of the ids. The problem is the dynamic header that hides the information. One easy and simple solution to update the offset would be simply to change the value being sent to the offset to account for the current height of the header :

    var HEADER_HEIGHT = 150;
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - HEADER_HEIGHT
        }, 1500, 'easeInOutExpo');

});

This would work but it generates a few issues:

  • If JavaScript is disabled the rendering would not show the page when people deep link to areas of the page. (fair enough most people have javascript) but some don’t. If its users that are using accessibility devices or search engines that want to see what a site does).
  • Adding complexity to the JavaScript logic – more complexity more processing(if we can offset it to the browser to deal with it even better).
  • If you need to have different offsets depending on the item your code gets even more messy.

So let’s do it in HTML/CSS. As in this case the site has a responsive design we can’t just add :

<a name="newAnchors" />

and position them around the site in the right locations that work for us as we need to take into account the fact that the header changes in size. Next option is to create a CSS rule for our anchors :

#myName{
position:relative;
top:-100px;
}

By using this solution we avoid needing to tweak JavaScript , we are learning on the built-
in capabilities of the browser and all is well in the world.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz