What is a back or scroll to top button ?
When a visitor scroll down a page of your website or blog at certain point ( which can be set ) arrow or button appears and when visitor click on it scroll position is set to top which means the page is auto scrolled to the top.
It feels very useful if you have long contents in your site and helps in more user engagements. It uses no external data and works very smoothly. You can easily customize it to match your site theme.
How to install back or scroll to top button ?
When a visitor scroll down a page of your website or blog at certain point ( which can be set ) arrow or button appears and when visitor click on it scroll position is set to top which means the page is auto scrolled to the top.
It feels very useful if you have long contents in your site and helps in more user engagements. It uses no external data and works very smoothly. You can easily customize it to match your site theme.
How to install back or scroll to top button ?
Step1: Paste below html codes before </body> tag in your html or you can also use widget in layout.
<button onclick="topFunction()" id="backtotop" title="Scroll to top">➧</button><script>window.onscroll = function() {scrollFunction()};function scrollFunction() {if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {document.getElementById("backtotop").style.display = "block";}else{document.getElementById("backtotop").style.display = "none";}}function topFunction(){document.body.scrollTop = 0;document.documentElement.scrollTop = 0;}</script>
Step2: Paste below CSS before ]]></b:skin> in your html.
#backtotop{display:none;position:fixed;bottom:0px;right:20px;z-index:99;border:none;outline:none;background-color:transparent;color:#d80000;cursor:pointer;font-size:50px;border-radius:10px;transform:rotate(-90deg);}#backtotop:hover{color:#555}
Note: Change red bold hex value to change arrow color.
Step3: Save Changes.
No comments:
Post a Comment