Run ScrollTop with offset of element by ID

Question

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?

score 155 · Accepted Answer · answered Mar 08 '12 at 14:33

155

No magic involved, just subtract from the offset top of the element

$('html, body').animate({scrollTop: $('#contact').offset().top -100 }, 'slow');

answered Mar 08 '12 at 14:33

charlietfl

170,828
13
121
150

1

Use window.innerHeight to determine the user's screen height. – Phillip Senn Aug 15 '13 at 16:07
1

@Phillip what does screen height have to do with anything in this instance? – charlietfl Aug 15 '13 at 16:31
If the page is long, and you have a submit button at the bottom of the page, you can scroll to the submit button and stop at the bottom of the user's visible window. – Phillip Senn Aug 15 '13 at 16:57
Thanks for this, one of those things I knew but simply forgot how easy it was. – DoPeT Nov 17 '14 at 18:33

score 2 · Answer 2 · answered Apr 28 '21 at 10:22

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.

score 0 · Answer 3 · edited Jul 26 '19 at 08:07

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;

score 0 · Answer 4 · edited Mar 04 '21 at 13:02

0

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');

edited Mar 04 '21 at 13:02

Syscall

19,327
10
37
52

answered Mar 04 '21 at 12:58

abubakkar tahir

737
1
11
13

Run ScrollTop with offset of element by ID

4 Answers4

Linked