Make anchor link go some pixels above where it's linked to
window.addEventListener("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 100);
});
This will allow the browser to do the work of jumping to the anchor for us and then we will use that position to offset from.
EDIT 1:
As was pointed out by @erb, this only works if you are on the page while the hash is changed. Entering the page with a #something
already in the URL does not work with the above code. Here is another version to handle that:
// The function actually applying the offset
function offsetAnchor() {
if(location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).
NOTE:
To use jQuery, you could just replace window.addEventListener
with $(window).on
in the examples. Thanks @Neon.
EDIT 2:
As pointed out by a few, the above will fail if you click on the same anchor link two or more times in a row because there is no hashchange
event to force the offset.
This solution is very slightly modified version of the suggestion from @Mave and uses jQuery selectors for simplicity
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
JSFiddle for this example is here
Single page anchor link goes bellow some pixels where it is linked with #link
i got the solution of issue just by subtracting the desired height form the actual height.
Complete and running code for me is following
$(document).on('click', 'a.page-scroll', function(event) {
var $anchor = $(this);
var desiredHeight = $(window).height() - 577;
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
Related Topics
Detect Back Button Click in Browser
Why Does (0 < 5 < 3) Return True
How to Make Exe Files from a Node.Js App
In JavaScript, How to Search an Array for a Substring Match
How to Turn JavaScript Array into Comma-Separated List
Call Servlet and Invoke Java Code from JavaScript Along with Parameters
React This.Setstate Is Not a Function
What's a Good Way to Extend Error in JavaScript
How to Check If the User Can Go Back in Browser History or Not
Jquery's .Click - Pass Parameters to User Function
What's the Difference Between & and && in JavaScript
How to Append <Script></Script> in JavaScript
In JavaScript, Why Is the "This" Operator Inconsistent
How to Automatically Set the Focus to a Textbox When a Web Page Loads