I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
Mubashir
Prototype page scrolling
Ashley
I’ve been working on a project over the last few days that uses anchor links to direct the user to specific content on the page, but instead of just clicking the link and page snapping to the content i thought it would be nice for the page to scroll to the specific content. This technique can be achieved using Prototype effects.
You need to include to the Prototype framework and effects library as shown below. Both of these files are in the download.
Place the code below along with the above in between the <head> </head> tags
So how do you use this?Implementing this script is simple. After you’ve added the code above you need to create a, href and an ‘id’ as in the code below. The JavaScript then picks up the #top or whatever your id name is and scrolls the page to that div. The only thing to point out is that this method of navigating between ‘anchors’ isn’t saved in the users history as with traditional anchors.
Click here to go to the top div> Click here to go to the bottom div>
Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com
Thanks , I’ve just been looking for info approximately this topic for ages and yours is the best I’ve discovered so far. But, what in regards to the bottom line? Are you positive concerning the source?
@aouse:
new Effect.ScrollTo(this.hash.substr(1),{ duration:’0.2′});
Oh thank you very much. Works great.
Really nice, Thanks. How do you control the speed?
GREAT THIS IS REALLY INFORMATIVE,THANKS.
Thanks Ashley. Very clean and simple.
thanks Ashley…I’m really new to java in general, I’ll give that a shot though.
how would i go about offsetting the final y that is scrolled to if I wanted it to stop a little short of the div?
@stowns i’d recommend using the jQuery page scroll plugin. i used it here: http://wedeliver.papermashup.com you should be able to take to code out of the page, its easy to offset with this function. I haven’t used Prototype for a long time
Thanks this code is sublime.
Bless you!! That was just what I needed!
This doesn’t appear to work with scriptaculous v1.8.1. Any plans on updating it?
@rob yeah i may look into updating this in the future. You can do the same effect with JQuery if your interested.
Sorry i’m still new to this whole thing, i didn’t realize the prototype.effect file was scriptaculous.
Is there anyway to use effects from scriptaculous instead of the prototype effect js?
Hi. Thanks for tutorial. I did it with JQuery at my mobile catalog CMS. For sample here . Just click on the icons (Bluetooth, Memory card, Camera and etc. ) I think the same things.
This is how I do it on firsttube.com using jQuery:
$(‘a[href*=#]’).click(function() { /* smooth scroll, courtesy http://bit.ly/C1ML3 */
if (location.pathname.replace(/^//,”) == this.pathname.replace(/^//,”) && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
@Adam It’s funny you posted that I was going to follow up with how you could do it with JQuery as a guy in the office uses it. Thanks for the comment!