Author
Here is the way to scroll to the top or bottom with sticky button on your website via a simple click. Go up and down buttons are the sticky button that works both ways to jump up and down easily. Briefly, Many people want to use it rather than moving them with the help mouse. This is a great way to encourage visitors for easy browsing on blog's content.
The Go Up and Go Down buttons have an important role for a site with text content that has a long page. For sites that have a lot of information on their pages, they will make other contents go unnoticed to scroll far down the page.
Well, for those who want to install scroll to the top or bottom with sticky button, please follow the steps below
Scroll to the top or bottom with sticky button
How to Install the Go Up and Go Down Button on the Blog
The first step, open Blogger > Click the Themes menu > Click Edit HTML
The code that I will share is using icons from Fontawesome. Now, add the code below before </head> in the template editor.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>Afer adding the Fontawesome code, please add the code below right before </head>
Go Up & Go Down Buttons Version 1
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>Go Up & Go Down Buttons Version 2
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>Then add the two codes below before </head>
<ul id='scrollToTop'>
<li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
<li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/><script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>That's all for an above tutorial on Scroll to the top or bottom with sticky button and hopefully, it would be useful.
EmoticonEmoticon