SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    modify code to make scroll to anchor minus set amount of pixels

    I am using the following code to scroll to anchor points with jQuery:

    Code:
        $(document).ready(function() {
          function filterPath(string) {
          return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
          }
          var locationPath = filterPath(location.pathname);
          var scrollElem = scrollableElement('html', 'body');
         
          $('a[href*=#]').each(function() {
            var thisPath = filterPath(this.pathname) || locationPath;
            if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {
              var $target = $(this.hash), target = this.hash;
              if (target) {
                var targetOffset = $target.offset().top;
                $(this).click(function(event) {
                  event.preventDefault();
                  $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                    location.hash = target;
                  });
                });
              }
            }
          });
         
          // use the first element that is "scrollable"
          function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i <argLength; i++) {
              var el = arguments[i],
                  $scrollElement = $(el);
              if ($scrollElement.scrollTop()> 0) {
                return el;
              } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                  return el;
                }
              }
            }
            return [];
          }
         
        });
    Is there anyway to make it scroll to that anchor but minus a set amount of pixels? (in my case i want it to go -92px)

    Thanks for any help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Yes, it would be the targetOffset that you want to adjust there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you advise how i go about that? I'm not Javascript savvy unfortunately..

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by t3stin View Post
    could you advise how i go about that? I'm not Javascript savvy unfortunately..
    Sure.

    Do not just dump -92 into the middle of the code, because that then makes it impossible for anyone to understand what it's supposed to do.
    Instead, set a variable to store the -92 offset in a variable, so that it's perfectly clear what it is for.

    Code javascript:
    var scrollOffset = -92;
    var thisPath = ...

    Then update the targetOffset assignment, so that it also uses your scrollOffset variable.

    Code javascript:
    var targetOffset = ... - scrollOffset;

    Where the ellipses are what is currently there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i'm fairly sure I have followed what you said and after setting the variable I have modified the line of code to this:
    Code:
    var targetOffset = $target.offset().top - scrollOffset;
    but it has no effect?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by t3stin View Post
    but it has no effect?
    Of course it doesn't, because you only followed the second part of my instructions.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Of course it doesn't, because you only followed the second part of my instructions.
    Code:
    var scrollOffset = -92;
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target) {
            var targetOffset = $target.offset().top - scrollOffset;
    As you can see here..it does not work though.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by t3stin View Post
    Code:
    var scrollOffset = -92;
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target) {
            var targetOffset = $target.offset().top - scrollOffset;
    As you can see here..it does not work though.
    What about it doesn't work?

    Is it that the "- scrollOffset" needs to be "+ scrollOffset" instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, I said that I had set the variable...

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had tweaked it last night, but now it scrolls to where i want (- 92 pixels) but immediately jumps back to its original scroll position instead of staying at the -92 pixel mark?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by t3stin View Post
    I had tweaked it last night, but now it scrolls to where i want (- 92 pixels) but immediately jumps back to its original scroll position instead of staying at the -92 pixel mark?
    Can you put up a sample version of what you've done at jsfiddle.net or somewhere else, for testing purposes?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

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