Tutorial Stats
how To Add A Scroll To Top Button To Your Weebly Site
Tutorial Description
This tutorial will show you how to add a scroll to top button to your Weebly site.
A scroll to top button allows visitors to your website to immediately be brought back to the top of the page they're viewing when the scroll to top button is clicked. This saves them time in having to manually scroll all the way up a long page.
The scroll to top button we'll be creating will fade in in the bottom-right corner of the screen the moment a page is scrolled by a visitor, and fade out the moment the top of the page is reached. The "fade in" and "fade out" transitions will be provided courtesy of Animate.css.
Also, to make sure the scroll to top's arrow icon looks good on all devices, we'll be using a font file (Dashicons).
A scroll to top button allows visitors to your website to immediately be brought back to the top of the page they're viewing when the scroll to top button is clicked. This saves them time in having to manually scroll all the way up a long page.
The scroll to top button we'll be creating will fade in in the bottom-right corner of the screen the moment a page is scrolled by a visitor, and fade out the moment the top of the page is reached. The "fade in" and "fade out" transitions will be provided courtesy of Animate.css.
Also, to make sure the scroll to top's arrow icon looks good on all devices, we'll be using a font file (Dashicons).
SHOW MORE
Tutorial
Step 1. Add Animate.cSS HTML Tag
Copy the HTML code below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
At the top, go to "Settings>SEO>Header Code". Add the HTML code you just copied to the "Header Code" input box.
Click "Save".
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
At the top, go to "Settings>SEO>Header Code". Add the HTML code you just copied to the "Header Code" input box.
Click "Save".
Step 2. Open Weebly's HTML/CSS Editor
At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.
Step 3. Add HTML Codes
Copy the HTML code below:
<div class="scroll"></div>
On the left under "HEADER TYPE", select the first page layout. On the right, directly under the "<body>" tag, paste the HTML code you just copied. Repeat this step for every other page layout your theme has under "HEADER TYPE".
<div class="scroll"></div>
On the left under "HEADER TYPE", select the first page layout. On the right, directly under the "<body>" tag, paste the HTML code you just copied. Repeat this step for every other page layout your theme has under "HEADER TYPE".
Step 4. Add CSS Codes
Copy the CSS codes below:
/* Dashicons */
@font-face {
font-family: 'dashicons';
src: url('fonts/dashicons.eot');
src: url('fonts/dashicons.eot?#iefix');
src: url('fonts/dashicons.woff');
src: url('fonts/dashicons.svg#svgdashicons');
src: url('fonts/dashicons.ttf');
}
/* Scroll To Top Button */
.scroll {
display:none;
width: 50px;
height: 50px;
background: #d8f500;
box-shadow: 0px 1px 1px rgba(0,0,0,.5);
border-radius: 50%;
justify-content: center;
align-items: center;
position: fixed;
bottom: 2em;
right: 2em;
cursor: pointer;
z-index: 30;
-moz-animation-duration: .5s;
-webkit-animation-duration: .5s;
-ms-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
}
.scroll:before {
font-family: 'dashicons';
content: "\f343";
font-weight: 100;
color: #212633;
font-size: 1.5em;
}
On the left, under "STYLES", click on "main.less". On the right, paste the CSS code you copied, preferably at the bottom of the file.
/* Dashicons */
@font-face {
font-family: 'dashicons';
src: url('fonts/dashicons.eot');
src: url('fonts/dashicons.eot?#iefix');
src: url('fonts/dashicons.woff');
src: url('fonts/dashicons.svg#svgdashicons');
src: url('fonts/dashicons.ttf');
}
/* Scroll To Top Button */
.scroll {
display:none;
width: 50px;
height: 50px;
background: #d8f500;
box-shadow: 0px 1px 1px rgba(0,0,0,.5);
border-radius: 50%;
justify-content: center;
align-items: center;
position: fixed;
bottom: 2em;
right: 2em;
cursor: pointer;
z-index: 30;
-moz-animation-duration: .5s;
-webkit-animation-duration: .5s;
-ms-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
}
.scroll:before {
font-family: 'dashicons';
content: "\f343";
font-weight: 100;
color: #212633;
font-size: 1.5em;
}
On the left, under "STYLES", click on "main.less". On the right, paste the CSS code you copied, preferably at the bottom of the file.
Step 5. jQuery Codes
Copy the jQuery codes below:
// Scroll To Top Button
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".scroll").removeClass("animated zoomOut");
$(".scroll").css('display', 'flex');
$(".scroll").addClass("animated zoomIn");
} else {
$(".scroll").removeClass("animated zoomIn");
$(".scroll").addClass("animated zoomOut");
}
});
$(".scroll").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
On the left under "ASSETS", click on "custom.js". On the right, directly under "jQuery(function($) {", paste the jQuery code you just copied.
// Scroll To Top Button
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".scroll").removeClass("animated zoomOut");
$(".scroll").css('display', 'flex');
$(".scroll").addClass("animated zoomIn");
} else {
$(".scroll").removeClass("animated zoomIn");
$(".scroll").addClass("animated zoomOut");
}
});
$(".scroll").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
On the left under "ASSETS", click on "custom.js". On the right, directly under "jQuery(function($) {", paste the jQuery code you just copied.
Step 6. Add Dashicons
Download all 4 of the Dashicon font files below:
| dashicons.eot |
| dashicons.svg |
| dashicons.ttf |
| dashicons.woff |
On the left, click the "+" icon to the right of "ASSETS". Select "New Folder" and name this folder "fonts".
Now click the gear icon to the right of "fonts" and select "Upload File(s)...". Upload the 4 Dashicon font files you download from above.
Click "SAVE".
Now click the gear icon to the right of "fonts" and select "Upload File(s)...". Upload the 4 Dashicon font files you download from above.
Click "SAVE".
You're done! Publish your site to see your new scroll to top button!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
