Add a Scroll to Top Button in Weebly Website

//Add a Scroll to Top Button in Weebly Website

Add a Scroll to Top Button in Weebly Website

Scroll to top is a useful way to go to the top of a specific webpage. Lots of web sites use this, by clicking on the arrow image that’s usually shown in the right lower corner, you will be taken to the top of that page. Well, this tutorial explains how to add a scroll to top or back to top button in Weebly websites.



How to Add a Scroll to Top Button in Weebly

There are basically five steps involved in adding scroll to top or back to top button:

#1 Download and modify the scroll to top JavaScript file.

#2 Download the up arrow image.

#3 Upload JavaScript and Image file to your Weebly site.

#4 Add Scroll to top in all pages.

#5 Add scroll to top in specific pages.

We’re going through each step in details.

Step 1. Download and Modify the Javascript File

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

img src=“http://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 wer’re almost done and left with two options for adding the scroll to top feature:

Add in all pages of the site.
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=“http://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.

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.

Step 5. Adding Scroll to Top on Specific Pages

Go to “Pages” tab in the Weebly site 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.

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.

We hope this article helped you learn how to add a scroll to top button in Weebly. You may also want to see our guide on how to stop search engines from crawling a Weebly site.

If you liked this tutorial, then you may consider subscribing to our WeeblyTutorials YouTube Channel for Weebly video tutorials. You can also find us on Twitter and Facebook.

By | 2018-01-18T02:11:53+00:00 January 18th, 2018|Tutorials|0 Comments

About the Author:

Editorial Staff at WeeblyTutorials is a team of Weebly experts.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.