Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 3 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 5 days ago

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

Prototype page scrolling

AshleyAshley

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>

demodownload

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

Comments 18
  • scrolling text
    Posted on

    scrolling text scrolling text

    Reply Author

    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?


  • Moe
    Posted on

    Moe Moe

    Reply Author

    @aouse:
    new Effect.ScrollTo(this.hash.substr(1),{ duration:’0.2′});


  • Paul
    Posted on

    Paul Paul

    Reply Author

    Oh thank you very much. Works great.


  • aouse
    Posted on

    aouse aouse

    Reply Author

    Really nice, Thanks. How do you control the speed?


  • SREE
    Posted on

    SREE SREE

    Reply Author

    GREAT THIS IS REALLY INFORMATIVE,THANKS.


  • Kendall
    Posted on

    Kendall Kendall

    Reply Author

    Thanks Ashley. Very clean and simple.


  • stowns
    Posted on

    stowns stowns

    Reply Author

    thanks Ashley…I’m really new to java in general, I’ll give that a shot though.


  • stowns
    Posted on

    stowns stowns

    Reply Author

    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?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @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 :(


  • Rafael Arrais
    Posted on

    Rafael Arrais Rafael Arrais

    Reply Author

    Thanks this code is sublime.


  • Jess
    Posted on

    Jess Jess

    Reply Author

    Bless you!! That was just what I needed!


  • Rob
    Posted on

    Rob Rob

    Reply Author

    This doesn’t appear to work with scriptaculous v1.8.1. Any plans on updating it?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @rob yeah i may look into updating this in the future. You can do the same effect with JQuery if your interested.


  • Rob
    Posted on

    Rob Rob

    Reply Author

    Sorry i’m still new to this whole thing, i didn’t realize the prototype.effect file was scriptaculous.


  • Rob
    Posted on

    Rob Rob

    Reply Author

    Is there anyway to use effects from scriptaculous instead of the prototype effect js?


  • AzeriFire
    Posted on

    AzeriFire AzeriFire

    Reply Author

    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.


  • Adam S
    Posted on

    Adam S Adam S

    Reply Author

    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;
    }
    }
    });


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @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!