Add a Back to Top Scroll Button on a Beaver Builder Page

Here is a way to add a quick scroll to top icon on a particular Beaver Builder page, this will only load on the page in question as instead of enqueuing it in functions.php we’ll add the code straight to the custom CSS/JS boxes in the page builder.



Open the page in Beaver Builder go to the Tools button and Layout CSS /Javascript button and paste in the CSS and Javascript.

layout-css-back to-top


#toTop {
display: none;
position: fixed;
bottom: 5px;
right: 10px;
width: 80px;
height: 80px;
opacity: 0.8;
filter: alpha(opacity=40); /* For IE8 and earlier */
#toTop:after {
content: "\f343";
font-family: dashicons;
color: #fff;
background-color: rgba(191,48,0,.5);
font-size: 35px;
border-radius: 50%;
padding: 5px;
view raw back-to-top.css hosted with ❤ by GitHub

Add JS

$(function() {
jQuery scrollTopTop v1.0 - 2013-03-15
(c) 2013 Yang Zhao -
(function(a){a.fn.scrollToTop=function(c){var d={speed:800};c&&a.extend(d,{speed:c});return this.each(function(){var b=a(this);a(window).scroll(function(){100<a(this).scrollTop()?b.fadeIn():b.fadeOut()});{b.preventDefault();a("body, html").animate({scrollTop:0},d.speed)})})}})(jQuery);
view raw back-to-top.js hosted with ❤ by GitHub

Add a HTML Module to the Page

Finally add a HTML module or text and text the markup.


<a href="#top" id="toTop"></a>
view raw back-to-top.html hosted with ❤ by GitHub

That’s it just change the color in the CSS for the background color of the icon.


Adding a Back to Top Sitewide in Beaver Builder

If you wanted to add the back to top button sitewide and had Beaver Themer it is also vey easy.

This time paste the CSS and JS in the Tools button > Global Settings


Then just add the HTML mark up to a module which is used in a Beaver Themer sitewide footer.

If you are using the Beaver Builder Theme – well that has one ready to turn on in the Customizer.





Leave a Comment

%d bloggers like this: