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.

How to Add Scroll To Top Button in Weebly Site?

Here are the summary of 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.

Let us discuss each step in detail.

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.
Uploading File in Weebly Site
Uploading File in Weebly Site

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.

Add Code in Weebly Site Home
Add Code in Weebly Site Home

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.

Note: 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.

Add Code in Single Weebly Page
Add Code in Single Weebly Page

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:},

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

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

39 thoughts on “How to Add Scroll To Top Button in Weebly Site?”

Leave your response.

  1. Hi – thanks for the info, works like a charm. Using a responsive theme, is there a way to make the button auto CENTER (at the bottom) on all devises? I can make it work adjusting {offsetx:} on my device, but the setting need to change for various screen sizes. Thx

    Reply
  2. Hi – thanks for the tutorial, works like a charm. My question is this: Can the scroll to top button be set to auto center on all devices? I can change it’s location via the “controlattrs: {offsetx:15, offsety:15}” settings, but I’m using a responsive theme and the button moves around on various screen sizes (offsetx:140 is perfect for my iphone 5s, but not for the ipad mini). I’ve tinkered with the code and I’ve poured through numerous tutorials, I just can’t seem to figure it out.

    Reply
  3. What would be the best way to use an alternate image on mouse hover with this method? I’m not too familiar with js and all the approaches I’ve found don’t seem to jive with this method.

    Thanks!

    Reply
  4. Thank you very much for this tutorial. Unfortunately, I can’t seem to make it work and I suspect it is due to some sort of javascript conflict. would you be so kind as to assist. I did check the quotes in the text file but they look identical so I’m not sure which is right and which is wrong. however, if I paste the URL or the arrow or the js into the browser it does show up. Just can’t seem to get it to appear on my blog. Thank you in advance!

    Reply
  5. Hi, I followed your instructions explicitly and nothing. I think with the introduction of weebly Carbon and the new editor paths that the image path is different. It now reads, http:// http://www.weebly.com/ editor/uploads/4/7/7/9/4779853/custom_themes/144695880551530792/files/up_arrow.png

    Do I now have to adjust the image path? And if I do, do I use the relative path and not the absolute path?

    Thank you for you reply.

    Reply
    • The widget on your site is perfectly working fine. The image path mentioned in the article is also correct, after uploading the image you can right click and get the image URL which will be like the one you have mentioned with Weebly domain. If you want to use your own domain, please use the path mentioned above.

      Reply
  6. Works beautifully (be sure to retain quotes (“) on the .js file or you’ll have a broken image icon.

    This doesn’t seem to work on iPhones? Because of java?

    Reply
  7. I’ve been doing something much simpler for several years now. It doesn’t actually scroll..but it takes you to the top. Which is where you want to go, and it’s much less complicated. You simply use your drag and drop menu IMAGE or TEXT option, and place which ever you decide to use at the bottom of your page(s) where you want them. Then you simply create a link on that image or text with the LINK option to that same page. Wha-la! You’re back at the top of your page! :) It shouldn’t mess with your backward or forward browser navigation in any way. You have to do this separate obviously for each page. ***If you use the copy and forward option for your text box or image box to copy and paste the text or image to each page, you must go in to each one and first remove and replace the link for each link, or they will all go to your original page location.

    Reply
  8. I’m confused about the header code. You said to replace “yoursitename.weebly.com” with our website name but the code you provided doesn’t have “yoursitename.weebly.com” in it?

    Reply
  9. I’ve done everything that the steps require, and the arrow doesn’t appear. I then just put the script into the header of my Appendix page (and deleted the .js file from the uploaded files) where I want it, and I changed the path to just “<img src="scrollup_button.png" because it was the only way that the arrow would actually show up on the preview. It works fine in the preview mode of Weebly, but when I publish the site and look at it any browser, the image is broken. I see that other people are having problems with this and you have yet to answer how to fix it. I would really appreciate the help! The button works fine, but no matter what i do, it shows up as a broken image.

    Reply
    • It looks you are using another script for scroll to top. When we check your appendix page, it is perfectly working fine.
      In case if you refer this article, there was a mistake in step 4, now we changed the code, please change the code and it should work fine.

      Reply
  10. I’ve also followed the tutorial fine and my image is broken. I’ve tried reuploading it several times and have even tried other images (renamed to up_arrow.png). Any ideas of how I can fix this?

    Thanks!

    Reply
  11. Hi, is there a way to adjust the image so it doesn’t rest exactly at the bottom of the webpage? We’re using Weebly free for now and the footer covers the arrow.
    Inside the .js file search for “controlattrs: {offsetx:15, offsety:15}”. The offsety parameter controls the offset height of the image from bottom which you can increase.
    You can also remove the free footer and add your own.

    I tried it but it does not worked,please help me.

    Reply
  12. Hi,

    I used your tutorial and it all works perfect on the full website. But when I open the website on my mobile, I can see the arrow but nothing happens when I click it. Any idea what causes this and how I can fix it? Thanks!

    Reply
    • View web version in mobile and check it works. If not other option is to change your mobile layout and check. The function as such should work fine both in mobile and desktop.

      Reply
    • Inside the .js file search for “controlattrs: {offsetx:15, offsety:15}”. The offsety parameter controls the offset height of the image from bottom which you can increase.

      You can also remove the free footer and add your own.

      Reply
      • The closest thing I have to that script is this:

        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() – this.$control.width() – this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() – this.$control.height() – this.controlattrs.offsety
        this.$control.css({left:controlx+’px’, top:controly+’px’})

        Reply
  13. Hi, I tried and completed all the steps (even the re-save to .js which was tricky with mac OSX) but the scroll up doesn’t appear in any of my pages. I don’t have the Weebly footer anymore; do you think this affects the script? Thanks.
    Chris

    Reply
  14. Hi

    Thanks for the excellent article. I managed to install the scroll to top widget. Just one question regarding this if you could help me that would be great.

    For some reason image which i uploaded downloaded from here is showing up broken, i tried couple of other images too but all are broken, functionality is working perfect just image is broken.

    Thanks,

    Mac

    Reply
  15. hello, it doesn’t work for me. I did every step multiple times but nothing happens. I don’t see the arrow in my pages at all…

    Reply
    • If you copied the code to Microsoft Word or any other text editor, check the quotes in the code. Otherwise, we tested and it works perfectly fine.

      Reply
  16. Thx for the tut, worked fine.

    Is there a chance to “slow down” the scrolling? Or to animate the scrolling process itsself?
    So that if the user hits the scroll up button, he doesn’t “jump” up, but smoothly scrolls up

    Reply
    • Modify the “scrollduration” and “fadeduration” values inside .js file in the below line:

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

      Hope this helps.

      Reply
  17. hi, I”ve ben following your tuto and it works perfectly, the only issue I have, it’s that the image doen’t appear, it’s actually transparent. Any idea why?

    Reply

Leave a Comment