Scroll to top is a useful way to go to the top of a specific web page. Lots of websites do use this, by clicking on the arrow image, 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:
- Download the up arrow image.
- Add Scroll to top in all pages.
- Add scroll to top in specific pages.
We’re going through each step in details.
- Download the 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 website as below:
- 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.
- 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.
- 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.