Conversation
supportIs there any easy way to set up an off set to adjust for the height of a navigation? https://wordpress.org/plugins/wp-localscroll/
I’m currently working on enabling options for this but in the meantime, if you open the file wp-localscroll.php and change the following: // When the document is loaded... jQuery(document).ready(function($) { // Scroll initially if there's a hash (#something) in the url $.localScroll.hash( { target: 'body', // Could be a selector or a jQuery object too. duration:1500 }); /** * Scroll the whole document * NOTE: I use $.localScroll instead of $('#navigation').localScroll(). */ $.localScroll({ target: 'body', // Could be a selector or a jQuery object too. duration:1000, hash:true }); }); to // When the document is loaded... jQuery(document).ready(function($) { // Scroll initially if there's a hash (#something) in the url $.localScroll.hash( { target: 'body', // Could be a selector or a jQuery object too. duration:1500, offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you) }); /** * Scroll the whole document * NOTE: I use $.localScroll instead of $('#navigation').localScroll(). */ $.localScroll({ target: 'body', // Could be a selector or a jQuery object too. duration:1000, offset: { top: -200 }, //offset by the height of your header (give or take a few px, see what works for you) hash:true }); }); See if that works
The above solution works perfectly. Another way to address this is with CSS, which would work with or without the scroll plugin. Create a class: /* Allow jump anchor text to appear somewhat below the top screen edge */ .anchor { position: relative; padding-top: 45px; } Change the pixel height to suit your needs. Then change the HTML anchor code as follows: <a class="anchor" name="example-text"></a> See examples of this at http://realramble.com/tips-for-home-buyers
thanks philiprabbett for the good work! the offset works great, even coming from other pages it works! it would be great if you can add the functionality in the core of the plugin. having a one-page scroll website usually comes with a fixed header, so I guess many people will enjoy this offset-feature. cheers!
I’m currently working on enabling options for this but in the meantime, if you open the file wp-localscroll.php and change the following: // When the document is loaded... jQuery(document).ready(function($) { // Scroll initially if there's a hash (#something) in the url $.localScroll.hash( { target: 'body', // Could be a selector or a jQuery object too. duration:1500 }); /** * Scroll the whole document * NOTE: I use $.localScroll instead of $('#navigation').localScroll(). */ $.localScroll({ target: 'body', // Could be a selector or a jQuery object too. duration:1000, hash:true }); }); to // When the document is loaded... jQuery(document).ready(function($) { // Scroll initially if there's a hash (#something) in the url $.localScroll.hash( { target: 'body', // Could be a selector or a jQuery object too. duration:1500, offset: { top: -200 } //offset by the height of your header (give or take a few px, see what works for you) }); /** * Scroll the whole document * NOTE: I use $.localScroll instead of $('#navigation').localScroll(). */ $.localScroll({ target: 'body', // Could be a selector or a jQuery object too. duration:1000, offset: { top: -200 }, //offset by the height of your header (give or take a few px, see what works for you) hash:true }); }); See if that works
The above solution works perfectly. Another way to address this is with CSS, which would work with or without the scroll plugin. Create a class: /* Allow jump anchor text to appear somewhat below the top screen edge */ .anchor { position: relative; padding-top: 45px; } Change the pixel height to suit your needs. Then change the HTML anchor code as follows: <a class="anchor" name="example-text"></a> See examples of this at http://realramble.com/tips-for-home-buyers
thanks philiprabbett for the good work! the offset works great, even coming from other pages it works! it would be great if you can add the functionality in the core of the plugin. having a one-page scroll website usually comes with a fixed header, so I guess many people will enjoy this offset-feature. cheers!