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 7 of 7
  1. #1
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times

    Offsetting internal # links

    I'm using 'smooth-scroll' to scroll smoothly to different divs in my layout from my nav bar - but I have a 80px high fixed header so I need to offset the links by 80px so it doesn't cover them up.

    Anyone know how to do this?

    This is the part of the Jquery that might help:

    // Get anchor link and calculate distance from the top
    var dataID = toggle.getAttribute('href');
    var dataTarget = document.querySelector(dataID);
    var dataSpeed = toggle.getAttribute('data-speed');
    var dataEasing = toggle.getAttribute('data-easing');
    var dataURL = toggle.getAttribute('data-url');
    Last edited by shanuea; Jan 19th, 2014 at 11:15 PM.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    That isn't the part of the jQuery that helps.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    You should handle it with the scrolling plugin you're using, not by modifying jQuery itself (if that's what you meant with the "this is the part of jQuery that might help" bit).

    Most have parameters to add an offset, as it must be a pretty common problem.

  5. #4
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Okay. In html this is what I use: The italic bits are the parts for the scrolling.

    <li><a href="#about" class="scroll" data-speed="2200" data-easing="easeInOutSine" data-url="true">ABOUT</a></li>

    And this is the program itself : Smooth Scroll

    I can't find any documentation that talks about offsetting.

    Any further help would be appreciated.

  6. #5
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    Hmm, you're right. No mention of offset in the docs. Personally, I've used this one before: Ariel Flesler: jQuery.ScrollTo

    It does have an offset option, but seems a bit more difficult to set up than Smooth Scroll.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It really wouldn't be hard to just modify the script. You just need to go through it and find where it calculates how far to scroll, and subtract 80 from it. The script is fairly well commented, so it's pretty easy to find.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Thanks. I found it and underlined the bit I changed. It kind of works but doesn't if it's at a further distance. It sometimes goes to the correct place, sometimes doesn't and sometimes goes there then suddenly jumps down. I tried putting -80 in all three zero spots here, same thing.

    // Calculate how far to scroll var startLocation = window.pageYOffset;
    var getEndLocation = function (anchor) {
    var location = 0; Changed to var location = -80;
    if (anchor.offsetParent) {
    do {
    location += anchor.offsetTop;
    anchor = anchor.offsetParent;
    } while (anchor);
    }
    location = location - headerHeight;
    if ( location >= 0 ) {
    return location;
    } else {
    return 0;
    }
    };
    var endLocation = getEndLocation(anchor);
    var distance = endLocation - startLocation;


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
  •  
All times are GMT -6. The time now is 09:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com