Comments on: Improved Animated Scrolling Script for Same-Page Links

By: Karl Swedberg

Karl Swedberg — Thu, 07 Feb 2013 18:04:46 +0000

The problem might be the selector in $('a[href*=#]'). Try $('a[href*="#"]') instead. Or, you can use the plugin.

By: three

three — Thu, 07 Feb 2013 14:04:02 +0000

help me. I don’t have a clue beginner here.

$(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’, ”);

$(‘a[href*=#]‘).each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.www.tringfernandez.com || !this.www.tringfernandez)
&& 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 0) {
return el;
} else {
$scrollElement.scrollTop(0);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});

I dont know why its stil not making a smooth scroll :(

By: Erick

Erick — Tue, 08 Jan 2013 07:30:02 +0000

this is awesome, is there a way to change the smooth scrolling to a kind of fade in effect? (:

By: Karl Swedberg

Karl Swedberg — Mon, 17 Sep 2012 00:22:49 +0000

Yeah, it is a little stupid and ugly, but not nearly as stupid and ugly as the bug that is forcing us to do it in the first place. ;)

As for that line, it’s a fallback script load in case for some reason the jQuery script can’t be loaded from Google’s CDN. If the CDN can’t be reached or times out or something, jQuery will be loaded from a local file instead.

By: Peter H.

Peter H. — Sun, 16 Sep 2012 21:22:56 +0000

Karl, thanks a lot for fixed-fix. I couldn’t possibly know whether the hack is ugly or stupid but it certainly works and I’ll certainly use it!
One last question (sorry, there’s always another question): what is this line for?
!window.jQuery && document.write(unescape(‘%3Cscript src=”../lib/jquery/jquery.js”%3E%3C/script%3E’));
Nothing appears to happen if I delete it, but perhaps it’s there for some other browser that I haven’t tested?

By: Karl Swedberg

Karl Swedberg — Sun, 16 Sep 2012 17:35:19 +0000

The trouble with the naming is that all of the files are referring to position fixed. So, you’re correct, the fixed-fix.html is the one you should use.

You’ll need to reference jQuery and the jquery.smooth-scroll.js plugin file in your html file. Then you can reference another script file that has the demo code with the “stupid” fix in it. Remember, you don’t need to use the same variable names (e.g. “$stupid” and “mobileHack”) and you don’t need to use the same selector ( “ul.mainnav a” ). Also, I put the demo code in the html file so you can see it if you view source, but you’re better off putting it in a separate file and referencing it like you do the jQuery file and the plugin file.

Hope that all makes sense.

By: Peter H.

Peter H. — Sun, 16 Sep 2012 13:08:38 +0000

Karl, thanks for such a fast response. The ‘stupid’ fix works on the iPad and I assume on the iPhone too, though I haven’t checked yet. I don’t have an Android device to check on.
I’m not at all knowledgeable about jquery and am like a bull in a china shop when I’m inside a jquery file. So am reluctant to touch anything in there aside from simple controls like speed change.
I re-downloaded the zip package from your github pages and I’m a little confused about the various files there. The only html page that consistently works on the iPad is the “fixed-fix.html”. The page “fixed.html” seems to exhibit the same problem as before the fix. Should I place your fix code inside script tags at the end of my html page (as in your fixed-fix.html)? Or can it go somewhere inside the ‘jquery.smooth-scroll.js’ file?
One last question: can one use a different easing control apart from ‘swing’?
Thanks again.

By: Karl Swedberg

Karl Swedberg — Sat, 15 Sep 2012 23:53:16 +0000

I came up with an ugly hack that will work around this mobile webkit bug.

* With smooth scroll: http://plugins.learningjquery.com/smooth-scroll/demo/fixed-fix.html
* Without smooth scroll: http://plugins.learningjquery.com/smooth-scroll/demo/fixed-nojs-fix.html

By: Karl Swedberg

Karl Swedberg — Sat, 15 Sep 2012 16:45:41 +0000

Hi Peter,

I definitely see the problem you’re referring to, and I can’t figure out what is going on there. In fact, I see the same exact problem on a page where no JavaScript is included at all. For example, check out this page:

http://plugins.learningjquery.com/smooth-scroll/demo/fixed-no-ss.html

Do you see the same problem there on iOS?

I’m investigating.

By: Peter H.

Peter H. — Fri, 14 Sep 2012 09:39:58 +0000

Hello Karl, thanks for all your work on this script – very nice.

One problem, which nowadays with so much mobile use really makes this script almost unusable, on iOS with a ‘position: fixed;’ div for the navigation menu, you lose clickability after the first scroll, until you manually scroll with a finger touch, then you can click-scroll again once only.

I’m sure you already know about this but I was wondering if you have plans to work on it?