« Back

Animated Scroll

Technical Blogs August 16, 2013 By Ryan Schuhler Staff

    The new trend in web design is long-scrolling pages. It allows space for cool animation and flowing content while cutting down the need for changing pages and waiting for things to load each time. A simple thing I found to make your scrolling page look sleek is by animating the scroll. Often times the navigation or links on a long-scroll style page are "#"s which link somewhere on the page. Instead of having the browser jump directly to that spot, it adds to the UX if you see the page scroll down. Alloy has this functionality and it is rather simple to implement.

    My idea was to just make a class that you could add to any anchor with a "#" in the href and on click it would scroll to the position you want. Here is what my code looks like:

    In order to implement this into Liferay all you would need to do is paste this code into your main.js or even into a script tag in a web content display. Then just add the class "animate-scroll" to any anchor with an href that is a "#". (For example Link). Simple and easy to implement. Enjoy!

Here is a preview of what it looks like.

No comments yet. Be the first.