PHP Magento Tips

Add Back To Top Scroll Button in Magento

Rate this posting:
{[['']]}

In this post, i will teach you how to add Back To Top Scroll Button in Magento.

First we will go through simple Method, after that we will create some extension for extra facility.

Method 1:

Step-1 Add this Div in Footer.phtml


<div id="back_top" style="display: block;"></div>

Step-2 Add this Java script in footer.phtml


<script type="text/javascript">
    jQuery(function() {
        jQuery(window).scroll(function() {
        if(jQuery(this).scrollTop() > 300) {
            jQuery('#back_top').fadeIn();   
        } else {
            jQuery('#back_top').fadeOut();
        }
    });
       jQuery('#back_top').click(function() {
        jQuery('body,html').animate({scrollTop:0},500);
    });   
    });
</script>


So, your app/design/frontend/rwd/default/template/page/html/footer.phtml file will look as per below.

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2016 X.commerce, Inc. and affiliates (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<div class="footer-container">
    <div class="footer">
        <?php echo $this->getChildHtml() ?>
        <address class="copyright"><?php echo $this->getCopyright() ?></address>
    </div>    
</div>
<div id="back_top" style="display: block;"></div>
<script type="text/javascript">
    jQuery(function() {
        jQuery(window).scroll(function() {
        if(jQuery(this).scrollTop() > 300) {
            jQuery('#back_top').fadeIn();   
        } else {
            jQuery('#back_top').fadeOut();
        }
    });
       jQuery('#back_top').click(function() {
        jQuery('body,html').animate({scrollTop:0},500);
    });   
    });
</script>

Step-3 Add this CSS at the end of skin/frontend/rwd/default/css/styles.css

#back_top {
    background-color: #3399CC;
    bottom: 40px;
    cursor: pointer;
    display: none;
    height: 44px;
    position: fixed;
    right: 0px;
    width: 54px;
}

Method 2:

Create Simple Module for back to top functionality.

Step 1: Create Module Initialization file. Create file in app/etc/modules/Vijay_ScrollToTop.xml and add below code in it.

<?xml version="1.0"?>
<config>
    <modules>
        <Vijay_ScrollToTop>
            <active>true</active>
            <codePool>local</codePool>
        </Vijay_ScrollToTop>
    </modules>
</config>

Step 2: Create config.xml file. Create file in app/code/local/Vijay/ScrollToTop/etc/config.xml and add below code in it.

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Vijay_ScrollToTop>
            <version>1.0.0</version>
        </Vijay_ScrollToTop>
    </modules>
    <global>
        <blocks>
            <vijay_scrolltotop>
                <class>Vijay_ScrollToTop_Block</class>
            </vijay_scrolltotop>
            <vijay_scrolltotop_adminhtml>
                <class>vijay_ScrollToTop_Block_Adminhtml</class>
            </vijay_scrolltotop_adminhtml>
        </blocks>
        <helpers>
            <vijay_scrolltotop>
                <class>Vijay_ScrollToTop_Helper</class>
            </vijay_scrolltotop>
        </helpers>
        <models>
            <vijay_scrolltotop>
                <class>Vijay_ScrollToTop_Model</class>
            </vijay_scrolltotop>
        </models>
    </global>
    <frontend>
        <layout>
            <updates>
                <vijay_scrolltotop>
                    <file>vijay/scrolltotop.xml</file>
                </vijay_scrolltotop>
            </updates>
        </layout>
    </frontend>
    <default>
        <vijay_scrolltotop>
            <general>
                <is_enabled>1</is_enabled>
            </general>
            <frontend>
                <color>#f49c14</color>
                <position>right</position>
            </frontend>
            <display_on>
                <all>1</all>
            </display_on>
        </vijay_scrolltotop>
    </default>
</config>

Step 3: Create system.xml file to give system configuration option for scroll to top settings. create file in app/code/local/Vijay/ScrollToTop/etc/system.xml and add below code in it. Here, we used frontend_model and source_model to give colorpicker option and selection of pages to display scroll to top button.

<?xml version="1.0"?>
<config>
 <tabs>
  <vijay translate="label" module="vijay_scrolltotop">
   <label>Back to top</label>
   <sort_order>310</sort_order>
  </vijay>
 </tabs>
 <sections>
  <vijay_scrolltotop translate="label" module="vijay_scrolltotop">
   <label>Scroll To Top</label>
   <tab>vijay</tab>
   <frontend_type>text</frontend_type>
   <sort_order>150</sort_order>
   <show_in_default>1</show_in_default>
   <show_in_website>1</show_in_website>
   <show_in_store>1</show_in_store>
   <groups>
    <general translate="label">
     <label>General Settings</label>
     <frontend_type>text</frontend_type>
     <sort_order>10</sort_order>
     <show_in_default>1</show_in_default>
     <show_in_website>1</show_in_website>
     <show_in_store>1</show_in_store>
     <fields>
      <is_enabled translate="label">
       <label>Is Enabled</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>10</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
      </is_enabled>
     </fields>
    </general>
    <frontend translate="label">
     <label>Frontend Settings</label>
     <frontend_type>text</frontend_type>
     <sort_order>20</sort_order>
     <show_in_default>1</show_in_default>
     <show_in_website>1</show_in_website>
     <show_in_store>1</show_in_store>
     <fields>
      <color translate="label">
       <label>Color</label>
       <frontend_type>text</frontend_type>
       <frontend_model>vijay_scrolltotop/adminhtml_system_config_form_field_color</frontend_model>
       <sort_order>20</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>0</show_in_website>
       <show_in_store>0</show_in_store>
       <validate>required-entry validate-hex</validate>
       <depends>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </color>
      <position translate="label">
       <label>Position</label>
       <frontend_type>select</frontend_type>
       <source_model>vijay_scrolltotop/source_position</source_model>
       <sort_order>30</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </position>
     </fields>
    </frontend>
    <display_on>
     <label>Display On</label>
     <frontend_type>text</frontend_type>
     <sort_order>30</sort_order>
     <show_in_default>1</show_in_default>
     <show_in_website>1</show_in_website>
     <show_in_store>1</show_in_store>
     <fields>
      <all translate="label">
       <label>All Pages</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>10</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </all>
      <home translate="label">
       <label>Home Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>20</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </home>
      <cms translate="label">
       <label>CMS Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>30</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </cms>
      <category translate="label">
       <label>Category Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>40</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </category>
      <product translate="label">
       <label>Product Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>50</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </product>
      <checkout translate="label">
       <label>Checkout Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>60</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </checkout>
      <cart translate="label">
       <label>Cart Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>70</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </cart>
      <account translate="label">
       <label>Customer Account Page</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>80</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </account>
      <other translate="label">
       <label>Other</label>
       <frontend_type>select</frontend_type>
       <source_model>adminhtml/system_config_source_yesno</source_model>
       <sort_order>90</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <depends>
        <all>0</all>
        <is_enabled>
         <fieldset>general</fieldset>
         <value>1</value>
        </is_enabled>
       </depends>
      </other>
     </fields>
    </display_on>
   </groups>
  </vijay_scrolltotop>
 </sections>
</config>

Step 4: Create adminhtml.xml file to give admin menu option which will redirect to scroll to top configuration settings. Create file in app/code/local/Vijay/ScrollToTop/etc/adminhtml.xml and add below code in it.

<?xml version="1.0"?>
<config>
    <acl>
        <resources>
            <admin>
                <children>
                    <system>
                        <children>
                            <config>
                                <children>
                                    <vijay_scrolltotop translate="title" module="vijay_scrolltotop">
                                        <title>Vijay - Scroll To Top</title>
                                    </vijay_scrolltotop>
                                </children>
                            </config>
                        </children>
                    </system>
                    <system>
                        <children>
                            <vijay_scrolltotop translate="title" module="vijay_scrolltotop">
                                <title>Scroll To Top Management</title>
                                <children>
                                    <scrolltotop translate="title" module="vijay_scrolltotop">
                                        <title>Scroll To Top Settings</title>
                                        <sort_order>0</sort_order>
                                    </scrolltotop>
                                </children>
                            </vijay_scrolltotop>
                        </children>
                    </system>
                </children>
            </admin>
        </resources>
    </acl>
    <menu>
        <system>
            <children>
                <vijay_scrolltotop translate="title" module="vijay_scrolltotop">
                    <title>Scroll To Top Management</title>
                    <sort_order>0</sort_order>
                    <children>
                        <scrolltotop translate="title" module="vijay_scrolltotop">
                            <title>Scroll To Top Settings</title>
                            <action>adminhtml/system_config/edit/section/vijay_scrolltotop</action>
                            <sort_order>0</sort_order>
                        </scrolltotop>
                    </children>
                </vijay_scrolltotop>
            </children>
        </system>

    </menu>
</config>

Step 5: To give Colorpicker option Create file in app/code/local/Vijay/ScrollToTop/Block/Adminhtml/System/Config/Form/Field/Color.php and add below code in it.

<?php
class Vijay_ScrollToTop_Block_Adminhtml_System_Config_Form_Field_Color extends Mage_Adminhtml_Block_System_Config_Form_Field
{
    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
    {
        $html = parent::_getElementHtml($element);
  
        if ( !Mage::registry('mColorPicker') ) {
            $html .= '
                <script type="text/javascript" src="'.$this->getJsUrl('vijayscrolltotop/jquery-1.8.2.min.js').'"></script>
                <script type="text/javascript" src="'.$this->getJsUrl('vijayscrolltotop/mColorPicker.min.js').'"></script>
                <script type="text/javascript">
                jQuery.noConflict();
                jQuery.fn.mColorPicker.init.replace = false;
                jQuery.fn.mColorPicker.init.enhancedSwatches = false;
                jQuery.fn.mColorPicker.init.allowTransparency = true;
                jQuery.fn.mColorPicker.init.showLogo = false;
                jQuery.fn.mColorPicker.defaults.imageFolder = "'.$this->getJsUrl('vijayscrolltotop/mColorPicker/').'";
                </script>
                ';
            Mage::register('mColorPicker', 1);
        }
  $html .= '
        <script type="text/javascript">
        jQuery(function($){
            $("#'.$element->getHtmlId().'").width("200px").attr("data-hex", true).mColorPicker({swatches: [
              "#9a1212",
              "#93ad2a",
              "#00ff00",
              "#00ffff",
              "#0000ff",
              "#ff00ff",
              "#ff0000",
              "#4c2b11",
              "#3b3b3b",
              "#000000"
            ]});
        });
        </script>
        ';
        return $html;
    }
}

Step 6: Create JS folder and add JS files to initialize colorpicker in admin.

Create js/vijayscrolltotop folder and add jquery-1.8.2.min.js and mColorPicker.min.js in it.

Also create js/vijayscrolltotop/mColorPicker folder and add color.png, grid.gif, meta100.png and picker.png images in it.

you can download whole files from https://github.com/meta100/mColorPicker

Step 7: Create file in app/code/local/Vijay/ScrollToTop/Model/Source/Position.php and add below code in it.

<?php

class Vijay_ScrollToTop_Model_Source_Position
{
    const LEFT_CODE  = 'left';
    const LEFT_LABEL = 'Left';

    const RIGHT_CODE  = 'right';
    const RIGHT_LABEL = 'Right';

    public function toOptionArray()
    {
        $helper = Mage::helper('vijay_scrolltotop');
        return array(
            array(
                'value' => self::LEFT_CODE,
                'label' => $helper->__(self::LEFT_LABEL),
            ),
            array(
                'value' => self::RIGHT_CODE,
                'label' => $helper->__(self::RIGHT_LABEL),
            ),
        );
    }

    public function toArray()
    {
        $helper = Mage::helper('vijay_scrolltotop');
        return array(
            self::LEFT_CODE  => $helper->__(self::LEFT_LABEL),
            self::RIGHT_CODE => $helper->__(self::RIGHT_LABEL),
        );
    }
}

Step 8: Create layout.xml file for frontend. Create file in app/design/frontend/base/default/layout/vijay/scrolltotop.xml and add below code in it.

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <name>vijay/scrolltotop/css/styles.css</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>vijay/scrolltotop/js/script.js</name>
            </action>
        </reference>
        <reference name="before_body_end">
            <block type="vijay_scrolltotop/arrow" name="vijay_scrolltotop_arrow" template="vijay/scrolltotop/arrow.phtml" />
        </reference>
    </default>
</layout>

Step 9: Create file in app/code/local/Vijay/ScrollToTop/Block/Arrow.php and add below code in it.

<?php

class Vijay_ScrollToTop_Block_Arrow extends Mage_Core_Block_Template
{
    /**
     * @return bool
     */
    public function canShow()
    {
        if (!$this->getConfig()->isEnabled()) {
            return false;
        }
        if ($this->getConfig()->canDisplayOnAll()) {
            return true;
        }
        if ($this->getPageHelper()->isHomePage()) {
            return $this->getConfig()->canDisplayOnHome();
        }
        if ($this->getPageHelper()->isCmsPage()) {
            return $this->getConfig()->canDisplayOnCms();
        }
        if ($this->getPageHelper()->isCategoryPage()) {
            return $this->getConfig()->canDisplayOnCategory();
        }
        if ($this->getPageHelper()->isProductPage()) {
            return $this->getConfig()->canDisplayOnProduct();
        }
        if ($this->getPageHelper()->isCheckoutPage()) {
            return $this->getConfig()->canDisplayOnCheckout();
        }
        if ($this->getPageHelper()->isCartPage()) {
            return $this->getConfig()->canDisplayOnCart();
        }
        if ($this->getPageHelper()->isAccountPage()) {
            return $this->getConfig()->canDisplayOnAccount();
        }
        return $this->getConfig()->canDisplayOnOther();
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return string
     */
    public function getColor($store = null)
    {
        return $this->getConfig()->getColor($store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return string
     */
    public function getPosition($store = null)
    {
        return $this->getConfig()->getPosition($store);
    }

    /**
     * @return Vijay_ScrollToTop_Helper_Config
     */
    public function getConfig()
    {
        return Mage::helper('vijay_scrolltotop/config');
    }

    /**
     * @return Vijay_ScrollToTop_Helper_Page
     */
    public function getPageHelper()
    {
        return Mage::helper('vijay_scrolltotop/page');
    }
}

Step 10: Now, we will Create necessary helper files. Create file in app/code/local/Vijay/ScrollToTop/Helper/Data.php and add below code in it.

<?php

class Vijay_ScrollToTop_Helper_Data extends Mage_Core_Helper_Data
{
    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function isEnabled($store = null)
    {
        return $this->getConfig()->isEnabled($store);
    }
    
    /**
     * @return Vijay_ScrollToTop_Helper_Config
     */
    public function getConfig()
    {
     return Mage::helper('vijay_scrolltotop/config');
    }
}


Step 11: Create file in app/code/local/Vijay/ScrollToTop/Helper/Config.php and add below code in it.

<?php

class Vijay_ScrollToTop_Helper_Config extends Mage_Core_Helper_Data
{
    const GENERAL_IS_ENABLED = 'vijay_scrolltotop/general/is_enabled';

    const FRONTEND_COLOR = 'vijay_scrolltotop/frontend/color';
    const FRONTEND_POSITION = 'vijay_scrolltotop/frontend/position';

    const DISPLAY_ON_ALL = 'vijay_scrolltotop/display_on/all';
    const DISPLAY_ON_HOME = 'vijay_scrolltotop/display_on/home';
    const DISPLAY_ON_CMS = 'vijay_scrolltotop/display_on/cms';
    const DISPLAY_ON_CATEGORY = 'vijay_scrolltotop/display_on/category';
    const DISPLAY_ON_PRODUCT = 'vijay_scrolltotop/display_on/product';
    const DISPLAY_ON_CHECKOUT = 'vijay_scrolltotop/display_on/checkout';
    const DISPLAY_ON_CART = 'vijay_scrolltotop/display_on/cart';
    const DISPLAY_ON_ACCOUNT = 'vijay_scrolltotop/display_on/account';
    const DISPLAY_ON_OTHER = 'vijay_scrolltotop/display_on/other';

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function isEnabled($store = null)
    {
        $isConfigEnabled = Mage::getStoreConfigFlag(self::GENERAL_IS_ENABLED, $store);
        $isModuleEnabled = $this->isModuleEnabled();
        $isModuleOutputEnabled = $this->isModuleOutputEnabled();
        return $isConfigEnabled && $isModuleEnabled && $isModuleOutputEnabled;
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function getColor($store = null)
    {
        return Mage::getStoreConfig(self::FRONTEND_COLOR, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function getPosition($store = null)
    {
        return Mage::getStoreConfig(self::FRONTEND_POSITION, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return string
     */
    public function canDisplayOnAll($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_ALL, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnHome($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_HOME, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnCms($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_CMS, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnCategory($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_CATEGORY, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnProduct($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_PRODUCT, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnCheckout($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_CHECKOUT, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnCart($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_CART, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnAccount($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_ACCOUNT, $store);
    }

    /**
     * @param null|int|Mage_Core_Model_Store $store
     *
     * @return bool
     */
    public function canDisplayOnOther($store = null)
    {
        return Mage::getStoreConfigFlag(self::DISPLAY_ON_OTHER, $store);
    }
}


Step 12: Create file in app/code/local/Vijay/ScrollToTop/Helper/Page.php and add below code in it.

<?php

class Vijay_ScrollToTop_Helper_Page extends Mage_Core_Helper_Data
{
    public function isHomePage()
    {
        $currentUrl = Mage::getUrl('*/*/*', array('_current' => true, '_use_rewrite' => true));
        $homePageUrl = Mage::getUrl('');
        return $currentUrl === $homePageUrl;
    }

    public function isProductPage()
    {
        $allowedActionNameList = array(
            'catalog_product_view',
        );
        $product = Mage::registry('current_product');
        return in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), $allowedActionNameList) && $product && $product->getId();
    }

    public function isCmsPage()
    {
        $page = Mage::getSingleton('cms/page');
        return $page->getId();
    }

    public function isCategoryPage()
    {
        $allowedActionNameList = array(
            'catalog_category_default',
            'catalog_category_layered',
            'catalog_category_view',
        );
        $category = Mage::registry('current_category');
        return in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), $allowedActionNameList) && $category && $category->getId();
    }

    public function isCheckoutPage()
    {
        $allowedActionNameList = array(
            'checkout_onepage_index',
            'checkout_multishipping_login',
            'checkout_multishipping_index',
        );
        return in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), $allowedActionNameList);
    }

    public function isCartPage()
    {
        $allowedActionNameList = array(
            'checkout_cart_index',
        );
        return in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), $allowedActionNameList);
    }

    public function isAccountPage()
    {
        $customerAccountHandle = 'customer_account';
        if (in_array($customerAccountHandle, Mage::app()->getLayout()->getUpdate()->getHandles())) {
            return true;
        }
        $allowedActionNameList = array(
            'customer_account_logoutSuccess',
            'customer_account_login',
            'customer_account_create',
        );
        return in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), $allowedActionNameList);
    }

    public function isOtherPage()
    {
        return !$this->isHomePage() && !$this->isProductPage() && $this->isCmsPage() && !$this->isCategoryPage() && !$this->isCheckoutPage() && !$this->isCartPage() && !$this->isAccountPage();
    }
}

Step 13: Create file in app/design/frontend/base/default/template/vijay/scrolltotop/arrow.phtml and add below code in it. you can see in scrolltotop.xml file we call this .phtml file before_body_end. so, this will create HTML at that place.

<?php /* @var $this Vijay_ScrollToTop_Block_Arrow */ ?>
<?php if ($this->canShow()): ?>
    <div id="vijay_scrolltotop_arrow" class="align-<?php echo $this->getPosition(); ?>" style="color:<?php echo $this->getColor(); ?>;display:none;"></div>
    <script type="text/javascript">
        new VijayScrollToTop({
            'arrowId'       : 'vijay_scrolltotop_arrow',
            'threshold'     : 0.3,
            'scrollOptions' : {
                'duration' : '0.5'
            }
        });
    </script>
<?php endif; ?>

Step 14: Create file in skin/frontend/base/default/vijay/scrolltotop/css/styles.css and add below code in it.

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?tfm3r6');
    src:url('../fonts/icomoon.eot?tfm3r6#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tfm3r6') format('truetype'),
    url('../fonts/icomoon.woff?tfm3r6') format('woff'),
    url('../fonts/icomoon.svg?tfm3r6#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


#vijay_scrolltotop_arrow {
    position: fixed;
    bottom: 20px;
    background: transparent;
    cursor: pointer;
}

#vijay_scrolltotop_arrow.align-left {
    left: 20px;
}

#vijay_scrolltotop_arrow.align-right {
    right: 20px;
}

#vijay_scrolltotop_arrow:before {
    font-family: 'icomoon' !important;
    content: "\e900";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 50px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#vijay_scrolltotop_arrow:hover:before {
    content: "\e901";
}



Step 15: Create file in skin/frontend/base/default/vijay/scrolltotop/js/script.js and add below code in it.

var VijayScrollToTop = Class.create({
    initialize: function (config) {
        this.initConfig(config);
        this.initElements();
        this.initObservers();
    },

    initConfig: function (config) {
        this.config = config;
        this.threshold = this.config.threshold;
        this.scrollOptions = this.config.scrollOptions || {};
    },

    initElements: function () {
        this.arrow = $(this.config.arrowId) || null;
    },

    initObservers: function () {
        if (this.arrow) {
            Event.observe(this.arrow, 'click', this._onArrowClick.bind(this));
            Event.observe(window, 'scroll', this._onWindowScroll.bind(this));
        }
    },

    _onArrowClick: function () {
        new Effect.ScrollTo($$('body').first(), this.scrollOptions);
    },

    _onWindowScroll: function () {
        var scrollOffset = document.viewport.getScrollOffsets()[1];
        var scrollThreshold = document.viewport.getHeight() * this.threshold;
        if (scrollOffset > scrollThreshold) {
            this.showArrow();
        } else {
            this.hideArrow()
        }
    },

    showArrow: function () {
        if (this.arrow) {
            this.arrow.show();
        }
    },

    hideArrow: function () {
        if (this.arrow) {
            this.arrow.hide();
        }
    }
});


Step 16: Create fonts folder inside skin/frontend/base/default/vijay/scrolltotop and add icomoon.eot, icomoon.svg, icomoon.ttf and icomoon.woff fonts in it. This fonts you can easily find from internet.

You can download whole module from Github : https://github.com/vijayrami/scrolltotop

In Admin you find below configuration.




1 Comments On "Add Back To Top Scroll Button in Magento"

Back To Top