Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {% comment %}
- Reduce below value if you need the back to the top button to appear higher up on the page.
- That value is in pixels.
- {% endcomment %}
- {% assign vertical_offset_for_trigger = 300 %}
- {% comment %}
- Vertical offset from bottom of browser for the position of the button.
- {% endcomment %}
- {% assign position_from_bottom = '15em' %}
- <a href="#" title="Back to the top" class="back-to-top">
- <span>Top</span> <i class="fas fa-angle-double-up"></i>
- </a>
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
- <style>
- .back-to-top {
- position: fixed;
- bottom: {{ position_from_bottom }};
- right: 10px;
- text-decoration: none;
- color: #999;
- background-color: #eee;
- font-size: 16px;
- padding: 0.3em;
- display: none;
- -webkit-border-top-left-radius: 3px;
- -webkit-border-bottom-left-radius: 3px;
- -moz-border-radius-topleft: 3px;
- -moz-border-radius-bottomleft: 3px;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- z-index: 60000;
- }
- .back-to-top i {
- vertical-align: middle;
- }
- .back-to-top span {
- padding-left: 0.5em;
- }
- .back-to-top i + span {
- padding-left: 0;
- }
- .back-to-top:hover {
- text-decoration: none;
- color: #555;
- }
- </style>
- <script>
- window.onload = function() {
- jQuery(function($) {
- var offset = {{ vertical_offset_for_trigger }};
- var duration = 500;
- $(window).scroll(function() {
- if ($(this).scrollTop() > offset) {
- $('.back-to-top').fadeIn(duration);
- }
- else {
- $('.back-to-top').fadeOut(duration);
- }
- });
- $('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
- e.preventDefault();
- $('html, body').animate( { scrollTop: 0 }, duration);
- return false;
- })
- });
- }
- </script>
Add Comment
Please, Sign In to add comment