jquery scrollto help.

pieplough

pieplough

pieplough

Soldato
Joined
15 Jul 2008
Posts
3,636
Location
Glasgow
Hi guys,

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

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:

Code: 
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
 
On the very same page you've linked, they link to a nifty little plugin which looks like it'd be a lot easier to setup.

Or if you really want to go all out, you could just use ScrollTo.

To be perfectly honest with you, there is no need to be using that raw script while those two handly plugins are available.
IMO, the only time you should write your own raw script is:
- if there isn't an existing plugin that does what you need to do.
- if existing plugins don't do everything you need them too and it would be very difficult to add those features in yourself.
- if the plugin is exceptionally large due to tons of features, while you only need a few of them. Then it would make sense to write your own just for the size savings.
 
Last edited:
Tripnologist said:
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.
Click to expand...

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.
 
You must log in or register to reply here.
Back
Top Bottom