Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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


Recommended Posts

  • 2 weeks later...

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.

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

  • 2 weeks later...

@@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

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
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>
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...