Adding a "scroll to top" button
A "scroll to top" button is a must-have element on the sites that have more than 3 blocks. It provides visitors who land on the site with a pleasant navigation experience and makes it easier for them to surf through your website.
Here's how the button can look like:
Important: This feature is available for Pro sites only.
For that, open the site Settings and proceed to the Custom code tab:
Insert the following line of code in the Before </BODY> section.
After that, you should add scripts for the button initialization and activation. For that, add the first following script before the previous line of code in the Before </BODY> section as well:
Now, add the second script to the <HEAD> tab:
To finish the integration, style your button with CSS styles. You can style the button however you want, but the easiest way is to use our given code snippet. Copy the following CSS properties and paste them in the CSS tab:
Tip: You can change the color of the button by adding another color code instead of #5FC7AE in the CSS script above.
Click on the Save button for changes to appear live.
Tip: If you need any help with adding or adjusting the "scroll to top" button, order Webmaster Hours from Weblium Studio. For that, contact us in chat or at support@weblium.com.
Here's how the button can look like:
Important: This feature is available for Pro sites only.
Adding a "scroll to top" button
For that, open the site Settings and proceed to the Custom code tab:
Insert the following line of code in the Before </BODY> section.
<div id="myBtn" title="Back to top"><i class="fa fa-angle-double-up"></i></div>After that, you should add scripts for the button initialization and activation. For that, add the first following script before the previous line of code in the Before </BODY> section as well:
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 600) {
jQuery('#myBtn').css('opacity', '1');
} else {
jQuery('#myBtn').css('opacity', '0');
}
});
jQuery('#myBtn').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 1800);
return false;
});
});
</script>Now, add the second script to the <HEAD> tab:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">To finish the integration, style your button with CSS styles. You can style the button however you want, but the easiest way is to use our given code snippet. Copy the following CSS properties and paste them in the CSS tab:
#myBtn {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
cursor: pointer;
opacity:0;
transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
position: fixed;
bottom: 50px;
right: 0;
background-color: #ededed;
color: #5FC7AE;
text-align: center;
font-size: 40px;
font-weight:bold;
text-decoration: none;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
#myBtn:hover {
background-color: #5FC7AE;
color: #fff;
}Tip: You can change the color of the button by adding another color code instead of #5FC7AE in the CSS script above.
Click on the Save button for changes to appear live.
Tip: If you need any help with adding or adjusting the "scroll to top" button, order Webmaster Hours from Weblium Studio. For that, contact us in chat or at support@weblium.com.
Updated on: 12/05/2023
Thank you!