ActionsDev
21 replies to this thread. Most Recent
[Pro] Can't smooth scrolling to anchors!!! Please help!!!
I’m building a 1 page website and I’ve been trying in vain to smooth-scroll-to-anchor. I have installed mootools unrestricted version but the smooth-scroll-to-anchor action is not showing up in the actions menu. What am I missing here??? It’s week of trying a workaround…still no joy! Please help!!!!
Sorry, I don’t understand the Moo stuff, but you could do this very easily using Protaculous (free at ActionsForge). This has the added benefit that it won’t conflict with the built-in Freeway FX Actions.
The following works in XHTML Strict, but I haven’t tested it in any other DOCTYPE. You may have to add a “shim” to fix any anchors that don’t have IDs, which is normal in HTML 4.
- Make your page as normal in Freeway, adding anchors and making links to them.
- Apply Protaculous to your page, and choose scriptaculous-packed as the Library.
- Click on the first Function Body button in the Actions Palette, and add this lump of code:
$$('a').each(function(elm){
if(elm.href && $(elm.href.split(/#/).last())){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(elm.href.split(/#/).last());
});
}
});
That’s really all there is to this. Taking it a line at a time, what this does is loop through all a (hyperlink) tags on the page. Where those links have an address that exactly matches one of the IDs on the current page, attach a “listener” function to the link that first stops the default behavior, then applies the Scriptaculous effect ScrollTo targeting the anchor.
Walter
Freeway user since 1997
Hello Walter, I’ve tried it but no go… I get JavaScript error. What could I be doing wrong????
Post a link to your page and I’ll take a look.
Walter
On May 4, 2010, at 4:11 PM, Dennis wrote:
Hello Walter, I’ve tried it but no go… I get JavaScript error. What could I be doing wrong????
Freeway user since 1997
Be sure to set the html to XHTML 1.0 strict in the inspector palette otherwise your page will just jump to the anchors you have set rather than scroll smoothly!
An easy element to overlook!!!
Worm
P.S Walt are there any disadvantages to using XHTML strict as opposed to HTML 4.01 transitional? apart from this doesn’t work!! And do you only apply this to the pages that require this particular scroll effect.
Not really. There are some interesting hiccups with the CSS Menus Action in horizontal view — the main menu elements can appear to be too large, for example, but otherwise it’s quite the same because of Freeway’s excellent design -> layout mapping.
If you want to, try this in HTML:
var anchors = $$('a');
anchors.each(function(elm){
var ref = elm.href.split(/#/).last();
var t = (ref) ? anchors.find(function(em){ return t.name == ref; }) : false;
if(t){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(t);
});
}
});
Most things in the Protoype/Scriptaculous world will accept either an ID or and object reference as their target, so this is substituting the string id of the anchor with the JavaScript object for that anchor. Since you’re iterating over the same array of elements twice, the first line captures that array, then the next line sets up the outer loop that looks through that array one element (elm) at a time. Inside that, you first test if this is a link to an anchor, then if it is, grab a reference to its target in t and finally set up the click observer on the link and set the effect to animate the transition to t.
Walter
PS: Between these two examples in this thread, there’s a SmoothScroll Action nearly written! Just need to dig out all the various tests for HTML level and such.
Freeway user since 1997
Sorry, typo in the above:
var anchors = $$('a');
anchors.each(function(elm){
var ref = elm.href.split(/#/).last();
var t = (ref) ? anchors.find(function(em){ return em.name == ref; }) : false;
if(t){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(t);
});
}
});
And no, you would only apply this to the pages that needed the behavior. Also, if you were linking from another page to a page that had this setup in place, you would see the normal anchor behavior, not the smooth scroll. I am not sure how you would kink an external link to open the page, then scroll slowly down to the target.
Walter
Freeway user since 1997
I’m using this on a XHTML1.0 Strict page and it works fine until I change my page extension to .php. I need to change the page extension to .php because I’m using PulseCMS on the page.
Marcel
@Helveticus, my guess is that your CMS alters the DOCTYPE from strict to transitional. If so, then you have to make an adjustment to the CMS somewhere, so that it puts out XHTML1.0Strict rather than XHTML1.0Transitional. There is some template that you can alter, I guess.
There should be no reason for the CMS to use transitional doctype (unless some of its functionality depends on quirks mode).
Let me explain: Usually, the only reason why people select Transitional over Strict, is so that they can be “valid”, since Transitional allows a few things which Strict considers illegal. But, unfortunately, Transitional also has the - usually unwanted/unintended (by the author) - side effect that it triggers another parsing mode – quirks mode – in most browsers.
However, there is no danger in getting an “invalid” stamp. It is more important that the page works as it should. If you really would like a valid stamp, then you can try to make your CMS out-put the HTML5 doctype, <!DOCTYPE html>, as that doctype allows roughly what Transitional permits, but without the quirks mode side effect.
Looking over this code, I just spotted a mistake on my part. The last() method will always return something: if the array returned by split() had only one element, then first() and last() would return the same segment. So the last() in the above should be replaced with [1] , which is an explicit test for “does this array have a second element?”
Walter
Freeway user since 1997
Looking back over this code yet again, I realized that it was doing some very dumb stuff that meant that an entire branch of it was irrelevant (it’d never be reached on any HTML page of any level).
Here’s another try at it that has been tested in HTML 4 Transitional and XHTML 1.0 Strict, and behaves identically in both.
var anchors = $$('a');
anchors.each(function(elm){
var ref = elm.href.split(/#/)[1];
var t = (!!$(ref)) ? $(ref) : anchors.find(function(em){ return em.name == ref; });
if(t){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(t);
});
}
});
What it does is to first check if there is an ID in the page that matches an anchor href, and if there is, it uses that to identify the target (t) for that link’s effect. If not, it looks to see if there is a matching HTML 4 a name="foo" style anchor instead, and uses that for the target element. Finally, if neither is present (as would be true if the anchor was to a foreign page) then the effect isn’t attached at all.
To use this function, apply Protaculous to your page, set the Library picker to scriptaculous-packed, and paste this code into the top Function Body editor.
One last note: this effect (Effect.ScrollTo from Scriptaculous) doesn’t work predictably on every sort of page layout, so if you can’t get the effect to fire, try it on a different, simpler page layout, ideally one that has a single really tall HTML box full of text that has had its height property removed. If it works there, but not in your more complex page, then you’re probably faced with a layout that doesn’t work with Scriptaculous, rather than an error in this bit of code.
Walter
Freeway user since 1997
Walt thanks I have updated the code in the Protaculous action. It works as expected when the page name ends in html but not in .php
sample pages here http://lauriehalvorson.com/test.html http://lauriehalvorson.com/test.php
Marcel
Neither of these pages are using the latest version of the code. They both have last() in them. Change this function:
$$('a').each(function(elm){
if(elm.href && $(elm.href.split(/#/).last())){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(elm.href.split(/#/).last());
});
}
});
to be this
var anchors = $$('a');
anchors.each(function(elm){
var ref = elm.href.split(/#/)[1];
var t = (!!$(ref)) ? $(ref) : anchors.find(
function(em){ return em.name == ref; }
);
if(t){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(t);
});
}
});
for a start.
Then you also have some validation issues to fix. First, your code for the Web Fonts is wrong. You are using a Strict doctype, but you haven’t self-closed the link tag that includes the Google Fonts CSS. Change the end of that code from > to /> and that will fix that (as well as a cascade of errors that follow it).
Next, you have defined the ID work twice. Once was in the A tag wrapped around the work-flag and the second was in a DIV elsewhere in the page. Click on each HTML box on the page, and find the one that’s named work. Change that to something else.
Same error on about and contact, in precisely the same manner.
As to why the PHP version doesn’t work, that’s because it’s including the jQuery library after Prototype, and not declaring jQuery.noConflict() to reassign the $ function back to Prototype.
Walter
On Jan 2, 2011, at 5:46 PM, Helveticus wrote:
Walt thanks I have updated the code in the Protaculous action. It works as expected when the page name ends in html but not in .php
sample pages here http://lauriehalvorson.com/test.html http://lauriehalvorson.com/test.php
Marcel
Freeway user since 1997
Walter thanks I’m jumping on his now and will let you know how it goes
Marcel
Walt all works fine. I also tried the new SmoothScroll action and it works a treat.
Where must I apply the code for - jQuery.noConflict()
Your PHP code is injecting jQuery into the page code right at the point where you do your PHP include() statement. If you view source on the PHP page, you’ll see it. You need to somehow get inside of the JavaScript block that is being created, and add this line directly after the link to the jQuery code:
jQuery.noConflict();
Ideally, this should happen before you include the other bit of code to run the slideshow.
But really, you should be looking at a different slideshow, one built on Prototype and Scriptaculous, since that won’t have any conflicts at all.
Walter
On Jan 3, 2011, at 12:56 PM, Helveticus wrote:
Walt all works fine. I also tried the new SmoothScroll action and it works a treat.
Where must I apply the code for - jQuery.noConflict()
Freeway user since 1997
Hi all,
I have been reading through this thread as i’m having an issue with smooth scroll on firefox… Basically, the site works a charm on IE and Safari but is clunky on firefox
Does anyone have any advice?
I don’t see any functional difference between Safari and Firefox on this page.
Walter
Freeway user since 1997
It must be the old laptop I checked it on… My wife also says it works on firefox at her work so fingers crossed!
Thanks for checking.
