• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

A quick question about a little jquery script


bamme

Senior Member
#1
Hi everyone

As some of you know im rubbish at javascript :)

I hardly understand it, so I resort to premade library plugins and effects while I learn about it. I'm currently using this one: http://djpate.com/portfolio/scrollTop/

(Code here:)

Code:
   <script>        function goToByScroll(id){                 $('html,body').animate({scrollTop: $("#"+id).offset(-620).top},'slow');        }        </script>
(HTML snippet here:)

HTML:
<ul>
      <li><a href="javascript:void(0)" onClick="goToByScroll('1')">Soups</a></li>
...
...
...

<p class="section" id="1">SOUPS</p>
What id like to do is modify the little script so that it will scroll to the anchor, minus or plus X amount of pixels. My header is fixed position at the top of the screen, it's height is 220px. The content area currently scrolls underneath the header, missing out 220px worth of content, as the id is right at the top.

Heres an example to show you what i mean (this isnt a finished project, sorry about messy areas..)

Untitled Document
 

Levi

Moderator
Staff member
#2
Now I'm not a javascript guru and I had to check it first but it looks like 'offset' is the thing that needs changing :)

Assuming that is the bit - in your code you've got the (-620) just play around with that till you're happy with it.
 

bamme

Senior Member
#3
Thanks Levi, The reason a number is in there is because thats what I tried - unfortunately it doesn't seem to make any difference :L
 

bamme

Senior Member
#5
Thanks ralph but the little number within the brackets next to offset doesnt seem to do anything at all, regardless of what's in it
 

bamme

Senior Member
#7
It only takes tht javascript snippet I posted glen, and jquery.js. I've posted a link to the actual plugin demo page above in my first post
 

bamme

Senior Member
#8
Solved it - for reference:
... $('html,body').animate({scrollTop: $("#"+id).offset().top - 280},'slow'); ...