How to Add Scroll To Top Button in Weebly Site?

Scroll to top is a simple and useful feature used to go to the top of a webpage anywhere from the down. You might have noticed an up arrow mark in the right lower corner of most the sites and by clicking on the arrow image you will be taken to the top of that page. This is a useful feature especially for the pages with long content. This article explains how to add scroll to top or back to top function in your free Weebly site. Learn more than 200 free Weebly tutorials to optimize your Weebly site.

Scroll To Top Button in Weebly

Depending upon your need, you can add the feature either site wide or only on specific pages. We have explained both the options in the following sections.

Step1: Download and Modify the Script File

• Download the zip file and extract it to a JavaScript file named “scrolltopcontrol.js”.
• Open the file in the editor like Notepad or TextEdit and look for the code img src=”up.png”.
• Replace it with the image path of your Weebly site as below:

img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"

• Save the modified file.

Step 2: Downloading the Up Arrow Image

• Right click on any of the below image and save it to your local drive. Check out here more scroll to top button images.
• Ensure to change the image file name to “up_arrow.png”.

Step 3: Uploading Files to Your Weebly Site

• Login to your Weebly account and select the site you want to add scroll to top function.
• In Weebly editor go to the “Theme” tab and then click on the “Edit HTML/CSS” button.
• Click on “+” icon in the “Assets” tab,  select “Upload File(s) from the dropdown and upload the modified “scrolltopcontrol.js” file.
• In the same manner upload the “up_arrow.png” image file.
• Save your theme, if this is the first time you upload files into your site then you will be prompted to enter a new theme name for your site. Enter a new theme name and save your changes.

Now you are almost done and left with two options for adding the scroll to top feature:

1. Add in all pages of the site.
2. Only in specific pages.

Step 4: Adding Scroll to Top in All Pages

Copy the below code and modify it by replacing “yoursitename.weebly.com” with your real Weebly site name.

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scrolltopcontrol.js"></script>

Go to “Settings” tab in the Weebly editor and paste the code in the “Header Code” box under “SEO” section as shown in the below picture.

Save your changes and publish your site to see an arrow button placed in the lower right corner when scrolling down. You can see the up arrow image in all your pages and clicking the image will take you to the top of your site.

Warning: If the scroll function does not work, then try pasting the code in “Footer Code” section instead of “Header Code” section.

Step 5: Adding Scroll to Top on Specific Pages

Go to “Pages” tab in the Weebly editor and select the page you want to add the scroll to top function. Click on the “Advanced Settings” link and paste the above code in the “Header Code” box as shown in the below picture. Remember to replace “yoursitename.weebly.com” with your real Weebly site name.

Save the changes and publish your site. Open the particular page and see the arrow button is now placed on the lower right corner of your page when scrolling down.

Using Back to Top Text

If you want to use text instead of an image then just add the below code anywhere on your page using an “Embed Code” element.

<a href="#top">Back to Top</a>

You also can use this code in the “Footer Code” box under “SEO” section of “Settings” tab to add “Back to Top” in the footer of your site. use <center> and <br> tags to align the text accordingly.

Note: Instead of #top you can use any HTML anchor in your page to scroll to that position.

Changing the Target Destination of the “Scroll To Top” Control

When you click on the up arrow, scroll bar by default will be moved to top of the page. If you want to move to any other position then you can control it by changing the “scrollto” attribute inside the .js file. For example changing “scrollto: 0” to “scroll: 100” will move the scroll bar 100 pixel below the top position. You also can move the position to any element defined in your page using below two steps.

• Step 1 – Define the element – For instance to define a H2 use embed code element and add the below code: 

<h2 id="movehere">Move the Scroll bar here </h2>

• Step 2 – Then change the attribute as scrollto: “movehere” inside the .js file as shown below:

setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

This will move the scroll bar to that H2 heading position when you click on the up arrow or  back to top link.