Magento – How to add a move to top button at the bottom in 5 minutes

If you want to add a quick move to top button (­čöŁ) on the bottom right of your Magento pages, follow below steps:

  1. Go to magento backend-> System -> Configuration -> Design -> HTML Head -> Miscellaneous Scripts field.
  2. Add below css between <style></style> tag.
    
    <br />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.to-top%20%7B%0A%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20bottom%3A%205px%3B%0A%20%20%20%20right%3A%205px%3B%0A%20%20%20%20font-size%3A300%25%3B%0A%20%20%20%20border%3Asolid%201px%20%3B%0A%20%20%20%20border-radius%3A%2010px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
    <p>
  3. Now to to System -> Configuration -> Design -> Footer -> Miscellaneous HTML.
  4. Add the below code:
  5. <a href="#" class="to-top">&#128285;</a>
  6. &#128285 is the code for the ­čöŁ┬ásymbol.
  7. Please note that this will display the icon on bottom right at all time and not only when someone scrolls down.
Updated: September 3, 2016 — 11:27 pm

Leave a Reply

Technology Central © 2014 - 2017 | Privacy Policy | Website Terms & Conditions