How do I use Ultimento’s Smooth Scroll extension?

One of the less known Ultimento features is the built-in custom Magento Smooth Scroll plugin. By default the smooth scroll function is integrated in several places:

1. “Read More” at the end of the short description on the product page slides down to the full product description.
2. When you click on the review stars on the product page (below the product name), it will smoothly slide down to the review tab.
3. Clicking on a question on the FAQ page slides down to the answer.
4. “Back to top” in the footer smoothly scrolls back to the top for easier navigation.
5. Several call to action on the home page lead to the New Arrivals product section.

But you can really use it anywhere you’d like on your Magento store! All you have to do is use the following code:

<a onclick="scrollToElement('element-id');" href="javascript:void(0);">text</a>

Where “div-id” is the id of the div you’d like to scroll to and “text” is whatever anchor text you want to use.

Next step for us is to set that up as a widget that can be easily implemented directly from within the Magento editor in the admin. So make sure to stay tuned!

5 Comments

1. helen says:

   October 12, 2011 at 9:33 am

   hi noam
   i have each section of a scrolled area listed in my footer tabs -but instead of going to the relevant place and then scrolling to the relevant section, it just goes to the page. I’m wanting the functionality you have on the footer tab, small print – 5 reasons to buy, but its not working for me – i copied your code – do you think i inadvertently deleted something?
   thanks
   helen

   Reply
   • noam says:

     October 12, 2011 at 11:07 am

     Yes most likely . But you can always revert by looking at the original code in the Ultimento files and make sure to carefully follow the same method.
2. ahmed says:

   December 3, 2011 at 10:29 am

   Hi Noam,

   Is there anyway to use the faq html in a static block so the smooth scroll functions properly? I’m trying to create a faq category so it appears in the main navigation. I pasted the html code in the static block and called it in the category display settings. It looks fine but the scrolling is kind of funky.

   http://dev.photoflipart.com/faq.html

   -Ahmed

   Reply
3. Simon says:

   January 9, 2012 at 12:45 am

   Hi,

   I can use this extension to scroll to a Div Id, which is great, but say I wanted to scroll to a tab inside the footer? wt-footer-wrapper – gets me down to the footer, but say I also wanted to have it open onto the second tab “about” which would be Li_About, is that possible?

   I know it does it on the products page for Reviews for example.

   Regards

   Simon

   Reply
   • Support says:

     January 11, 2012 at 7:53 am

     Hi Simon,

     The product review tab has specific javascript written for that functionality. The specific code first handles the switching of the tab and then calls the scroll function. To have it do what you want, you will have to write your own javascript.

     Look for the javascript function WTOpenReviewsTab in skin/frontend/default/ultimento/js/wt-product-page.js for additional info.

     Regards,
     Support