Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to make my page scroll to content with a fixed header

    The site i'm working on is here

    Currently the menu links scroll to the correct section of the page.

    However i'm trying to insert down arrows at the bottom of each section that will take the user to the start of the next section.

    An example can be found here - the down arrow is meant to take the user to the 'Sponsorship' section but as you can see it currently overshoots the content and it disappears behind the header.

    Can I add a rule so that any anchor tags with the class of '.down-arrow' compensate for the pixel width of the header?

    I've tried something along the lines of the following from another forum question but can't get it to work - mainly because my knowledge of jquery is minimal!

    $.down-arrow({hash:true, offset: {top: 65},duration: 1000,easing:'easeInOutExpo'});
    Last edited by ChrisL_57; 09-09-2013 at 04:38 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 655 Times in 654 Posts
    Why are you using JS to do this when it's an HTML built in function?
    Read http://www.computerhope.com/issues/ch000049.htm
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Because i'm using a fixed header that scrolls with the page, if I use the '#top' method the content disappears behind it so I need to add a pixel or specified length to compensate for the size of my header.

    I need some sort of offset rule that may or may not exist...


  •  

    Posting Permissions

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