Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    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/

    The code ive used in my site is here:

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

    <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 my development site to show you what i mean (this isnt a finished project, sorry about messy areas..):

    Untitled Document

    I've tried changing values within these brackets and nothing changes:

    .offset()

  2.  

  3. #2
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    Give this a try:

    HTML Code:
    <script type="text/javascript">
    function goToByScroll(id){
    	$('html,body').animate({scrollTop: $("#"+id).offset().top-100},'slow');
    }
    </script>
    The 'top-100' part will minus 100px from the final offset position. So if you wanted to add say 220px, you would do:

    HTML Code:
    <script type="text/javascript">
    function goToByScroll(id){
    	$('html,body').animate({scrollTop: $("#"+id).offset().top+220},'slow');
    }
    </script>
    Hope that helps

  4. #3
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    thankyou, this works great!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

jquery scrollto div minus pixels

,
jquery scrolltop minus
,
scrollto id minus pixels
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com