Jump to content
vampirehunter

Correct way to add "back to top" arrow at bottom in BS?

Recommended Posts

Here you can find snippet:

 

http://bootsnipp.com/snippets/featured/back-to-top

 

Add CSS to stylesheet user.css

#toTop{
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	display: none;
}

Add js to template_bottom.php

$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    	$(window).scroll(function () {
			if ($(this).scrollTop() != 0) {
				$('#toTop').fadeIn();
			} else {
				$('#toTop').fadeOut();
			}
		}); 
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

That's it!

 

Off course you should wrap this all in a footer_scripts module to do it really right ... I would say  ht_product_colorbox.php  is a good example how to create yur own module.

Share this post


Link to post
Share on other sites

@@azpro thank you very much for this hint. I've made this into a header_tag module so there are no core changes (to template_bottom.php) required...  Please someone test to be sure it works (attached).

 

The only issue I see is the "back to top" button" disappears behind the class"thumbnail equal-height wrapper" (the new product boxes) on index.php.

 

I was trying something like;

	display: visible !important; 

but no joy.

 

Any ideas?????

 

I will add as a contribution if I can get this fixed....

 

BOOTSTRAP - back to top.zip

Share this post


Link to post
Share on other sites

@@greasemonkey

@@multimixer

 

Yes I did and I did it a little different, but I don't remember if and/or where I posted it :-

 

includes\modules\header_tags\ht_back_to_top_btn.php:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright © 2015 osCommerce

  Released under the GNU General Public License
*/

  class ht_back_to_top_btn {
    var $code = 'ht_back_to_top_btn';
    var $group = 'footer_scripts';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function ht_back_to_top_btn() {
      $this->title = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_TITLE;
      $this->description = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_DESCRIPTION;
      
      if ( defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS') ) {
        $this->sort_order = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER;
        $this->enabled = (MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS == 'True');
      }
    }

     function execute() {
       global  $oscTemplate;

$vertical_position = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION;
$speed = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED;

$output = <<<EOD
    <script>
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-lg btn-info"><span class="glyphicon glyphicon-chevron-up"></span></div>');
        $(window).scroll(function () {
            if ($(this).scrollTop() > $vertical_position) {
                $('#toTop').fadeIn();
            } else {
                $('#toTop').fadeOut();
            }
        });
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, $speed);
        return false;
    });
});
</script>   
EOD;

      $oscTemplate->addBlock($output, $this->group);
    }    
    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Back to Top Module', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'True', 'Do you want to enable the Back to top module?', '6', '', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', '1500', 'Sort order of display. Lowest is displayed first.', '6', '', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Vertical Position', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', '150', 'Defines where, when scrolling down, the button is displayed. Default 150.', '6', '', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Scroll Speed ', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED', '500', 'Defines the scrolling up speed in ms. Low value = fast - high value =slow. Default 500.', '6', '', now())");
    
    
    
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED');
    }
  }

?>

user.css:

/* Back-to-Top-Button*/
#toTop {cursor: pointer; position: fixed; bottom: 30px; right:15px; z-index: 2; display:none; border: 1px solid #000;  color: #ffffff;
  border-color: #357ebd;
  background-color: #0489FB;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#B5DCFD), to(#0489FB));
  background-image: -webkit-linear-gradient(top, #B5DCFD, 0%, #0489FB, 100%);
  background-image: -moz-linear-gradient(top, #B5DCFD 0%, #0489FB 100%);
  background-image: linear-gradient(to bottom, #B5DCFD 0%, #0489FB 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B5DCFD', endColorstr='#0489FB', GradientType=0);}

#toTop:hover,
#toTop:focus {background-color:#fff;}

You don't need the color settings or may change them to your needs.

 

language file: 

define('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_TITLE', 'Add a Back To Top Button to your pages.');
  define('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_DESCRIPTION', 'Add a Back To Top Button to your pages.');

J.J.

Share this post


Link to post
Share on other sites

@@multimixer thank you very much.... yes z-index worked perfectly.

 

To get in front of the wrapper element mentioned above I had to increase to;

	z-index: 91;

@De Dokta

 

I will add your speed and position variables to mine... Would you like to release the addon?

Share this post


Link to post
Share on other sites
I will add your speed and position variables to mine... Would you like to release the addon?

 

@@greasemonkey

 

No time for it - if you want to release it as addon, just do it.... :)

 

J.J.

Share this post


Link to post
Share on other sites

I have just implemented something similar but the button floats on the page. I started with the above code but made a few alterations. Hopefully the code will work on all mobile devices.

 

Create a new file in includes\modules\header_tags\  and call it ht_back_to_top_btn.php:

 

In that file add

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright © 2015 osCommerce

  Released under the GNU General Public License
*/

  class ht_back_to_top_btn {
    var $code = 'ht_back_to_top_btn';
    var $group = 'footer_scripts';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function ht_back_to_top_btn() {
      $this->title = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_TITLE;
      $this->description = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_DESCRIPTION;
      
      if ( defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS') ) {
        $this->sort_order = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER;
        $this->enabled = (MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS == 'True');
      }
    }

     function execute() {
       global  $oscTemplate;

$vertical_position = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION;
$speed = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED;

$output = <<<EOD
    <script>
$(document).ready(function(){
      
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    	$(window).scroll(function () {
			if ($(this).scrollTop() != 0) {
				$('#toTop').fadeIn();
			} else {
				$('#toTop').fadeOut();
			}
		}); 
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>   
EOD;

      $oscTemplate->addBlock($output, $this->group);
    }    
    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Back to Top Module', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'True', 'Do you want to enable the Back to top module?', '6', '', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', '1500', 'Sort order of display. Lowest is displayed first.', '6', '', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Vertical Position', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', '150', 'Defines where, when scrolling down, the button is displayed. Default 150.', '6', '', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Scroll Speed ', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED', '500', 'Defines the scrolling up speed in ms. Low value = fast - high value =slow. Default 500.', '6', '', now())");
    
    
    
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED');
    }
  }

?>

Create the same language file as included above.

 

In the user.css stylesheet add the following code

/* Back-to-Top-Button*/
#toTop{
	position: fixed;
	bottom: 40px;
	right: 40px;
	cursor: pointer;
	display: none;
}

#toTop .fa {margin-right: 5px;}

Once uploaded to your site just go to admin - modules- headertags- and click the install module at the top right of the page. 

 

The button should appear in the bottom right corner of your site and should show once the page has moved.

 

Works on my site like that anyway. Hopefully the code is correct and no core files are changed.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Sorry, it does work, code just appears funny in the editor. Both De Dokta and 14Steve14 tests OK.

Share this post


Link to post
Share on other sites

@@Hotclutch  Ashley thanks for packaging this up...I downloaded and installed it last night and it was very easy to install and works perfectly.  Thanks also to the folks who wrote the code.

 

Dan

Share this post


Link to post
Share on other sites

Thanks to all involved for a great package.

 

I am running Osc234BS

I have this working on all pages but then it only works on top level categories pages. As you enter the sub levels the arrow is not present.

This may just be me - but can somone else check this out - or point me in the right direction to fix it.

 

Tom

Share this post


Link to post
Share on other sites

I see on a brand new store the button does not display on the product pages. I have it working properly elsewhere though, can't say what the problem may be. Maybe a setting, or conflict with another script, don't know, will have a look later.

Edited by Hotclutch

Share this post


Link to post
Share on other sites

On the test store it works on some products (where there are bigger pics eg. id=12) others not, eg id=24.

Share this post


Link to post
Share on other sites

Are you sure its not there. Is it being covered. Try adding a z-index: 999; to the css file where the other css is in the user.css file. That should bring it to the top layer on the page.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Hi Steve,T

Tried z-index 999 but still no sign on product page.

 

Hi Ashley,

I am not a programmer so what is the pic id=12 and how do I change that? or do I need larger images?

​Thank you both for the help!

Share this post


Link to post
Share on other sites

Try even higher .. Bootstrap - if I remember correctly - also uses z-index around 1020 ... So try for example 19000 ...

Share this post


Link to post
Share on other sites

Hi Steve,T

Tried z-index 999 but still no sign on product page.

 

Hi Ashley,

I am not a programmer so what is the pic id=12 and how do I change that? or do I need larger images?

​Thank you both for the help!

 

On a brand new store, products_id=12 (Die hard with a vengeance :lol: ) works.

Share this post


Link to post
Share on other sites

Having just one big pic in itself won't let the button display, it seems to display only when you select at least one large image for the pic gallery.

 

This is the source code when it does not work:

<img src="images/die_hard_3_large.jpg" alt="" width="400" height="531" class="img-responsive" itemprop="image" style="display:none;" />
    <div class="piGal pull-right">
      <img src="images/die_hard_3_large.jpg" alt="Die Hard With A Vengeance" title="Die Hard With A Vengeance" width="400" height="531" class="img-responsive" />    </div>

This is the code when it works:

<img src="images/die_hard_3.gif" alt="" width="100" height="80" class="img-responsive" itemprop="image" style="display:none;" />
    <div class="piGal pull-right" data-imgcount="1">

<img src="images/die_hard_3_large.jpg" alt="" width="400" height="531" class="img-responsive" id="piGalImg_1" />
    </div>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×