JQuery script smooth scrolling to various sections with a different offset

Question

I use a smooth scroll script for my site on one page. It scrolls to each anchor.

Due to the design, I cannot snap the binding directly to the top of the page. I had to create hidden anchors that are beyond the page so that it does not snap exactly to the top.

Here is the script that I am currently using:

jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({ scrollTop: $('[name="' + this.hash.substring(1) + '"]').offset().top }, 500); }); }); 

I was informed that I can do an offset in this script. Instead of having these little hidden anchors everywhere, I can just add something to the end of the vertex to compensate for it with a certain number of pixels. It will be the top 250

 $('html,body').animate({ scrollTop:$('[name="' + this.hash.substring(1) + '"]').offset().top - 250 }, 500); 

The problem is that the offset will always be 250px, I need it to be variable, so, for example, the portfolio div div can be mapped with the offset 200px, but the contact div is only 50px.

Can someone help me write some kind of selector in a script that will allow me to configure this vertex - [variable], on the basis of which the div is bound?

Answer 1

In fact, you did not specify which rules are used to determine the offset of the named top binding value.

So, the easiest way would be to enter an attribute that you can use to adjust the offset on the named anchor or any element that you want to scroll into the view.

So, for example, here is a named anchor with a new attribute called data-section-offset , and I want to offset it by 20 pixels.

 <a id="myAnchor" data-section-offset="20">My Section</a> 

In the click handler, you can pull out the attribute value for the animation.

 jQuery(document).ready(function($) { $(".scroll").click(function(event) { event.preventDefault(); var $anchor = $('#' + this.hash.substring(1)); $('html,body').animate({ scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset') }, 500); }); }); 

Here's a fiddle to show the following example.

Note. JQuery has a data method, so the attribute can be pulled either like this (as indicated above)

 $anchor.attr('data-section-offset') 

or how is it

 $anchor.data('section-offset') 

As @Ben noted, the HTML5 specification for custom data attributes is very useful> HTML 5 data-Attributes .

Answer 2

First of all, you do not need to use the old convention <a name= . Check out the w3schools page for HTML anchors on w3schools . Best practice is to bind the container element by id.

So, if you are linking to a div with some content, use <div id="linkToMe">My content in here.</div> and <a href="#linkToMe">The link text</a> .

This, of course, will break your code above as it searches for elements by name. You want to search for them by id (faster anyway!).

On my webpage, I have a toolbar at the top, which is sometimes position: fixed; , so when I scroll, I want to shift the scroll position so that it does not fall under my toolbar at the top of the page.

Here is how I do it:

 function goToByScroll(id) { //Find toolbar height var pageOffset = 0, hdr = $('#sub'), tb = $('#sitemenu'); if (hdr.css('position') == 'fixed') { pageOffset += hdr.height() } if (tb.css('position') == 'fixed') { pageOffset += tb.height() } //Scroll the document $('html,body').animate({ scrollTop: $("#" + id).offset().top - pageOffset }, 'slow'); } 

and then connect it to jQuery:

 $(".jumptoid").click(function (e) { e.preventDefault(); // Track in google analytics if you are using it. _gaq.push(['_trackEvent', 'Jump to Id', e.currentTarget.host, this.href, 0]); // Scroll to item location using jquery goToByScroll(this.href.split('#')[1]); // Push History in browser bar so the forward/back button works window.location.hash = this.href.split('#')[1]; return false; }); 

This will perfectly align the top of the target element with the bottom of my title / toolbar if they are fixed in position or the top of the browser view if not.

In your case, you either want to change the way the offset is calculated (instead of the hdr and tb elements, you can do some other math or see other elements of the page), or you can use the custom attribute suggested by @chris moutray.

If you want to use the attribute, use the proposed html5 standard, starting with data- , so that it passes the check. For exmaple <div id="linkToMe" data-scroll-offset="250">My content here</div> and then use the @chris code to grab this attribute, like $anchor.attr('data-scroll-offset') .