Run ScrollTop with offset of element by ID
JqueryScrolltopJquery Problem Overview
Trying to make the browser scroll to a specific ID with an added offset -
$('html, body').animate({scrollTop: $('#contact').offset().top}, 'slow');
What I need to do is to set the offset by -100px. How can I accomplish this?
Jquery Solutions
Solution 1 - Jquery
No magic involved, just subtract from the offset top of the element
$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow');
Solution 2 - Jquery
jQuery(function($) {
$('a[href*="#"]:not([href="#"])').click(function() {
var target = $(this.hash);
$('html,body').stop().animate({
scrollTop: target.offset().top - 120
}, 'linear');
});
if (location.hash){
var id = $(location.hash);
}
$(window).on('load', function() {
if (location.hash){
$('html,body').animate({scrollTop: id.offset().top -120}, 'linear')
};
});
});
this worked for me.
Solution 3 - Jquery
var top = ($(".apps_intro_wrapper_inner").offset() || { "top": NaN }).top;
if (!isNaN(top)) {
$("#app_scroler").click(function () {
$('html, body').animate({
scrollTop: top
}, 100);
});
}
if you want to scroll a little above or below from specific div that add value to the top like this.....like I add 800
var top = ($(".apps_intro_wrapper_inner").offset() || { "top": NaN }).top + 800;
Solution 4 - Jquery
no logic involve only need subtraction with -215 and it's exact put my div properly at top postion
$('html,body').animate({scrollTop: $("#"+id).offset().top -215},'slow');