how to set offset() 100px in this script?

Question

How can I set the offset() function to do what margin-top: 100px; would do?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

    <script type="text/javascript">
    $(function() {
        $(document).scrollTop( $("#position_page").offset().top );  
    });
    </script>

    <div id="aboutUs">
      About us content...
    </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="position_page">
      Header content...
    </div>

`$(document).scrollTop( $("#position_page").offset().top - 100);` ? — bencripps, Jul 29 '14 at 13:50
Why not use urls with the id reference in it: `http://website.com/#position_page`? This will automatically put the view on the div you want. — Tessmore, Jul 29 '14 at 13:52

score 16 · Answer 1 · answered Jul 29 '14 at 13:55

16

You can just add on the offset to the end of the scrollTop like this:

$(document).scrollTop( $("#position_page").offset().top + 100);

Here is a working example: http://jsfiddle.net/mtruty/rks3H/

answered Jul 29 '14 at 13:55

mdt0093

236
1
5

Your jsfiddle uses `400` not `100` and the content you added is not in the right place. Also because `position_page` is the last element and does not contain any content your example always scroll all the way to the bottom. Here is an update http://jsfiddle.net/rks3H/1/ – GillesC Jul 29 '14 at 14:06

springbo · Answer 2 · 2019-03-13T14:02:24.267

simply add 100 to the scroll position

<script type="text/javascript">
$(function() {
    $(document).scrollTop( $("#position_page").offset().top + 100);  
});
</script>

<div id="aboutUs">
  About us content...
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="position_page">
  Header content...
</div>

`add 100` yet `$("#position_page").offset().top - 100` – GillesC Jul 29 '14 at 14:00 — GillesC, Jul 29 '14 at 14:00

how to set offset() 100px in this script?

2 Answers2