jquery scrollto help.

[pieplough]

Hi guys,

Im trying to animate a scroll using this plugin. Here is the jquery code

   1.
      $(document).ready(function() {
   2.
        function filterPath(string) {
   3.
        return string
   4.
          .replace(/^\//,'')
   5.
          .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
   6.
          .replace(/\/$/,'');
   7.
        }
   8.
        var locationPath = filterPath(location.pathname);
   9.
        var scrollElem = scrollableElement('html', 'body');
  10.
       
  11.
        $('a[href*=#]').each(function() {
  12.
          var thisPath = filterPath(this.pathname) || locationPath;
  13.
          if (  locationPath == thisPath
  14.
          && (location.hostname == this.hostname || !this.hostname)
  15.
          && this.hash.replace(/#/,'') ) {
  16.
            var $target = $(this.hash), target = this.hash;
  17.
            if (target) {
  18.
              var targetOffset = $target.offset().top;
  19.
              $(this).click(function(event) {
  20.
                event.preventDefault();
  21.
                $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
  22.
                  location.hash = target;
  23.
                });
  24.
              });
  25.
            }
  26.
          }
  27.
        });
  28.
       
  29.
        // use the first element that is "scrollable"
  30.
        function scrollableElement(els) {
  31.
          for (var i = 0, argLength = arguments.length; i <argLength; i++) {
  32.
            var el = arguments[i],
  33.
                $scrollElement = $(el);
  34.
            if ($scrollElement.scrollTop()> 0) {
  35.
              return el;
  36.
            } else {
  37.
              $scrollElement.scrollTop(1);
  38.
              var isScrollable = $scrollElement.scrollTop()> 0;
  39.
              $scrollElement.scrollTop(0);
  40.
              if (isScrollable) {
  41.
                return el;
  42.
              }
  43.
            }
  44.
          }
  45.
          return [];
  46.
        }
  47.
       
  48.
      });

Now setting it up was easy and it works, just im struggling to customise it to my needs.

I have a sticky fixed header with primary navigation at the top, its 106 px high.

So when I click my first link (#portfolio) it scrolls that to 0 which is the top of the browser and covers 106px of the portfolio div.

ive tired using this:

var targetOffset = $target.offset().top - 106;

But this didnt work, even if it did clicking the home link would take you to 106 px under the top of the page.

Can anyone help or recomend me a better plugin? (im a complete jquery/javascript n00b if you didnt guess )

Cheers

 

[pieplough]

snip

Thanks for the reply mate, trying to get my head around that plugin on github. Dosent seem to have much in the way of explanation.

 

[pieplough]

On the Github page, there is a download button which will get you a zip file which includes a working demo so you can see how it works.

Yeah I got that working, but still cant work out a way to stop it scrolling at a specific position i.e. "106 px" above the target. Which is what im struggling with.