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.

beaver-builder-back-to-top

 

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

Add CSS

#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

jQuery(document).ready(function($){
$(function() {
$("#toTop").scrollToTop(800);
});
});
/*!
jQuery scrollTopTop v1.0 - 2013-03-15
(c) 2013 Yang Zhao - geniuscarrier.com
license: http://www.opensource.org/licenses/mit-license.php
*/
(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.click(function(b){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.

html-module-back-to-top

<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

beaver-themer-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.

beaver-scroll-to-top

ref

 

 

Leave a Comment





%d bloggers like this: