In this tutorial we will create a Scroll to Top funtionality.
To make this functionality work throughout the whole website, we will put this in the main template.
1. Go to your main template and create a div. Change the ID of the the div to div_go_top.
2. Put an icon in your div. This will be the visual element where people can click on. You can choose any icon and style it the way you want. I also changed the name of the div to Scroll to Top Div to make it more reconizable.
3. Go to your your div. Click on Advanced and click on Layout. Choose Display none and Position fixed. On position fixed fill in 30px right and 20px bottom.
4. Go to your your div. Click on Advanced and click on Javascript. Put in the javascript below into to javascript editor to make the div with icon appear and disappear on scroll and give it the click function.
document.getElementById(“div_go_top”).onclick = function() {topFunction()};
// When the user scrolls down 150px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById(“div_go_top”).style.display = “block”;
} else {
document.getElementById(“div_go_top”).style.display = “none”;
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
jQuery(‘html, body’).animate({scrollTop:0}, 800);
}
That’s it! You have a Scroll to Top function on every page.
NOTE: You will only see it when you scroll down the page. In the visual editor it will also not show. In the visual editor change Display none to Display block on the div if you want to see or edit it.
