I have the following scroll script, which scrolls round the page fine, works exactly how i want it too.
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
However, i need it to ignore the top say 200px as i have a fixed header at the top of the page that the content scrolls behind.
Meaning that when i scroll to top it scrolls the content to behind the fixed header so i cannot see it, so i need it to scroll to just below the header.. so to treat the bottom of the header as the top of the browser i suppose....
Can this be done as it would be very handy?
Many thanks for any help
The offset() method set or returns the offset coordinates for the selected elements, relative to the document. When used to return the offset: This method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.
Definition and Usage The offsetTop property returns the top position (in pixels) relative to the parent. The returned value includes: the top position, and margin of the element.
To set scrolltop position in jQuery, use the scrollTop() method. The scrollTop( ) method gets the scroll top offset of the first matched element. This method works for both visible and hidden elements.
Method 1: Using window.scrollTo() The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.
Would something like this work?
var targetOffset = $target.offset().top - 200;
Or grab the height of the header element for the extra offset.
var targetOffset = $target.offset().top - $("element").outerHeight(true);
You could use something like this if condition on ur code to do that
//check if the absolute position is below header
if ($('#IdOfTheScrollElement').position().top >= 200 ){
//scroll
}
else {
//do nothing
}
The Code is fine, you just need to remove the height of your fixed header here, for example if it's 200px. it will work perfectly.
$('html,body').animate({scrollTop: (targetOffset().top)-200}, 1000);
You can also check this when a button is clicked
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
// Check height of the header and padding
var header_height = $('.header').outerHeight();
Remove it from your offset
$('html,body').animate({scrollTop: (targetOffset().top) - header_height }, 1000);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With