Button to take a user to the top of the page in the Footer section

[deepapatel]

 I want to add a Top button in the website page footer that takes a user back to the top. Can anyone please help me with what to add to a button to do that? I will appreciate that. Thank you!

[Anton · Accepted solution]

Hey @deepapatel, 

you need to add some JavaScript (to your main.js or as a seperate js file) like this one

// Back to top functionality
  function initBackToTop() {
    const backToTopButton = document.createElement('button');
    backToTopButton.innerHTML = '↑';
    backToTopButton.className = 'back-to-top';
    backToTopButton.setAttribute('aria-label', 'Zurück nach oben');
    
    document.body.appendChild(backToTopButton);
    
    // Show/hide button based on scroll position
    function toggleBackToTop() {
      if (window.pageYOffset > 100) {
        backToTopButton.classList.add('back-to-top--visible');
      } else {
        backToTopButton.classList.remove('back-to-top--visible');
      }
    }
    
    // Scroll to top function
    function scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
    
    window.addEventListener('scroll', toggleBackToTop);
    backToTopButton.addEventListener('click', scrollToTop);
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBackToTop);
  } else {
    initBackToTop();
  }

and some CSS like

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #007cba;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top:hover {
  background-color: #005a87;
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
}

/* Responsive Design */
@media (max-width: 768px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
    font-size: 16px;
  }
}

My personal recommendation is to create seperate files like back-to-top.js and back-to-top.css in the corresponding folders in your theme. Add the back-to-top.js below by adding

{{ require_js(get_asset_url('path/to/back-to-top.js')) }}

below the 

{{ standard_footer_includes }} 

in your layout.html (or base.html) which should be located in templates/layout folder.

For the back-to-top.css, add it to your main.css by using

{% include 'path/to/back-to-top.css' %}

Last but not least, add a

<a href="#" class="back-to-top"></a>

to your layout.html (or base.html). 

Another option would be to create a custom module with similar code and add the custom module to the layout.html (or base.html; what ever it's called in your case)

best, 

Anton

p.s.:
Feel free to modify the css with some theme variables

[Anton · Accepted solution]

Hey @deepapatel, 

as Interactive is a marketplace, you will need to create a child-theme first in order to be able to modify/extend it.

Have you created a child theme of the interactive theme in the past and are you using it?

If not, it will be a bit more work, but only a few clicks 🙂 

Continue here, if you haven't created a child-theme yet:

Go to your Design Manager, find and open the "Interactive"

folder. 

Once opened, it should look something like this:

Click on File -> Create Child theme

Put your individual information into the popup fields.

all names are completely up to you, but note that they'll be visible in the source code.

If you want to use several words, I recommend to replace "space" with a dash("-") or underscore("_") or just combine them like "thisIsMyCustomTheme". Spaces are not great in source code 😀

After clicking the "Create Child theme" button, you will see your child-theme setup.

Contiune here if you have created a child-theme before:

Click on File and create a new folder called "js" (optional but recommended). 

If the folder shouldn't appear, try reloading the page. 

After you see the folder, right click it and select New file in "js" 

In the popup, select "Javascript"

 in the next step, give it the name "back-to-top"

Click "Create"

Paste the first code block I've shared in my previous reply into the file. 

It should look like this

Feel free to modify the code to your needs.

Line 4:

backToTopButton.innerHTML = '↑'; 
// replace the ↑ with anything you'd like to display as the button text. Can be an icon, text, emoji... Important: keep the quotes

Line 5: 

backToTopButton.className = 'back-to-top';
// do not change unless you want to modify everything in the CSS

Line 6:

backToTopButton.setAttribute('aria-label', 'Zurück nach oben');
// replace the 'Zurück nach oben' to something like 'Click here to get back to top'. This is for accessibility/screen-readers

Line 12:

if (window.pageYOffset > 100) {
// replace the 100 with a number you'd like the button to appear. This is the scroll distance. In this example the button will appear once the user scrolls for more than 100px. Usually this number is set to something between 100 and 800

Click the Publish button in the right corner.

Next, create a new folder "css".

Make sure it's on the same level as js and not a child folder. (You can right-click on your theme name in the top of the left sidebar and select "create folder")

Right-click the folder, create a new file and select "CSS + HubL". Give it a name.

Paste the second code block from my previous reply into it.

It should look like this:

Modify it to your requirements. 

You can use the theme variables for styling and replace all hardcoded values to automatically meet your theme settings. 

This can be a bit fiddly, but you can check the theme-overrides.css from the original Interactive theme and copy some of the button settings over to it. 

If you don't want to deal with it, you can simply replace the hardcoded values, with your values for background-color, color, padding, border....

Once happy, publish this file.

Last but not least, open the base.html of your child-theme.

• Copy line 22 and replace line 26 with it.
• Right-click on the back-to-top.css file and select "copy public URL".

select everything in between the double quotes in line 26 and hit paste(CTRL/CMD+V). 

It should look like this:

{{ require_css(get_asset_url("{{ get_asset_url('/my-custom-theme/css/back-to-top.css') }}")) }}

^ This code won't work so it needs to be changed to

{{ require_css(get_asset_url("/my-custom-theme/css/back-to-top.css")) }}

Also - remove Line 24.

Add a new line after the <body> tag and put this code in:

<a href="#" class="back-to-top"></a>

 Next:

Right click the back-to-top.js file and copy the public URL of it. 

Modify the (should be around line 50)

{{ require_js(get_asset_url('../../js/main.js')) }}

as you did with the css so it will look like this:

{{ require_js(get_asset_url('/my-custom-theme/js/back-to-top.js')) }}

Save/publish this.

The final step is to open every page that the button should be visible on and changed from the interactive theme to your child-theme. (This is the main reason I always recommend to create a child-theme before even start building the first page)

Best, 

Anton

[deepapatel]

Anton, I am not a developer, so I don't know how to do this. Is there a step-by-step instruction on how I can create this? I can follow instructions. I am using the Interactive theme. 

[Anton · Accepted solution]

Hey @deepapatel, 

as Interactive is a marketplace, you will need to create a child-theme first in order to be able to modify/extend it.

Have you created a child theme of the interactive theme in the past and are you using it?

If not, it will be a bit more work, but only a few clicks 🙂 

Continue here, if you haven't created a child-theme yet:

Go to your Design Manager, find and open the "Interactive"

folder. 

Once opened, it should look something like this:

Click on File -> Create Child theme

Put your individual information into the popup fields.

all names are completely up to you, but note that they'll be visible in the source code.

If you want to use several words, I recommend to replace "space" with a dash("-") or underscore("_") or just combine them like "thisIsMyCustomTheme". Spaces are not great in source code 😀

After clicking the "Create Child theme" button, you will see your child-theme setup.

Contiune here if you have created a child-theme before:

Click on File and create a new folder called "js" (optional but recommended). 

If the folder shouldn't appear, try reloading the page. 

After you see the folder, right click it and select New file in "js" 

In the popup, select "Javascript"

 in the next step, give it the name "back-to-top"

Click "Create"

Paste the first code block I've shared in my previous reply into the file. 

It should look like this

Feel free to modify the code to your needs.

Line 4:

backToTopButton.innerHTML = '↑'; 
// replace the ↑ with anything you'd like to display as the button text. Can be an icon, text, emoji... Important: keep the quotes

Line 5: 

backToTopButton.className = 'back-to-top';
// do not change unless you want to modify everything in the CSS

Line 6:

backToTopButton.setAttribute('aria-label', 'Zurück nach oben');
// replace the 'Zurück nach oben' to something like 'Click here to get back to top'. This is for accessibility/screen-readers

Line 12:

if (window.pageYOffset > 100) {
// replace the 100 with a number you'd like the button to appear. This is the scroll distance. In this example the button will appear once the user scrolls for more than 100px. Usually this number is set to something between 100 and 800

Click the Publish button in the right corner.

Next, create a new folder "css".

Make sure it's on the same level as js and not a child folder. (You can right-click on your theme name in the top of the left sidebar and select "create folder")

Right-click the folder, create a new file and select "CSS + HubL". Give it a name.

Paste the second code block from my previous reply into it.

It should look like this:

Modify it to your requirements. 

You can use the theme variables for styling and replace all hardcoded values to automatically meet your theme settings. 

This can be a bit fiddly, but you can check the theme-overrides.css from the original Interactive theme and copy some of the button settings over to it. 

If you don't want to deal with it, you can simply replace the hardcoded values, with your values for background-color, color, padding, border....

Once happy, publish this file.

Last but not least, open the base.html of your child-theme.

• Copy line 22 and replace line 26 with it.
• Right-click on the back-to-top.css file and select "copy public URL".

select everything in between the double quotes in line 26 and hit paste(CTRL/CMD+V). 

It should look like this:

{{ require_css(get_asset_url("{{ get_asset_url('/my-custom-theme/css/back-to-top.css') }}")) }}

^ This code won't work so it needs to be changed to

{{ require_css(get_asset_url("/my-custom-theme/css/back-to-top.css")) }}

Also - remove Line 24.

Add a new line after the <body> tag and put this code in:

<a href="#" class="back-to-top"></a>

 Next:

Right click the back-to-top.js file and copy the public URL of it. 

Modify the (should be around line 50)

{{ require_js(get_asset_url('../../js/main.js')) }}

as you did with the css so it will look like this:

{{ require_js(get_asset_url('/my-custom-theme/js/back-to-top.js')) }}

Save/publish this.

The final step is to open every page that the button should be visible on and changed from the interactive theme to your child-theme. (This is the main reason I always recommend to create a child-theme before even start building the first page)

Best, 

Anton

[STierney]

Hey @deepapatel - thank you for this context.

I'm re-tagging @Anton for better visibility!

Shane, Senior Community Moderator

[deepapatel · Accepted solution]

@STierney , @Anton 

  Here is the solution I found, and it works well. I added this code directly to the website's footer HTML. I hope this helps others. BTW, I can't expand this text window.

Adding a "Back to Top" Button to Every Page on HubSpot

This guide provides the complete HTML, CSS, and JavaScript code needed to implement a fixed, scrolling "Back to Top" arrow button on your HubSpot website using the Interactive theme. Placing this code in your Site Footer HTML will appear on all pages, blog posts, and landing pages.

1. The Code Block

Copy the entire block of code below. This single script contains the button element, its styling (CSS), and the functionality (JavaScript) to handle scrolling and showing/hiding the button.

Note: The styling uses a fixed position in the bottom-right corner.

Code in Footer

<!-- START: Back to Top Button Implementation -->

<style>

    #backToTopBtn {

        display: none; /* Hidden by default */

        position: fixed; /* Fixed position */

        bottom: 20px; /* Place the button 20px from the bottom */

        right: 30px; /* Place the button 30px from the right */

        z-index: 99; /* Make sure it stays on top of other elements */

        border: none; /* Remove border */

        outline: none; /* Remove outline */

        background-color: black; /* Button background color */

        color: #6cca0b; /* Updated to the new bright green arrow color */

        cursor: pointer; /* Add a mouse pointer on hover */

        padding: 15px; /* Some padding */

        border-radius: 50%; /* Make it round */

        font-size: 25px; /* Increased font size for a slightly larger arrow */

        line-height: 0;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

        transition: background-color 0.3s, transform 0.2s;

        /* Responsive sizing */

        width: 50px;

        height: 50px;

    }

    #backToTopBtn:hover {

        background-color: #333333; /* Dark gray for hover on black background */

        transform: scale(1.05);

    }

</style>

<!-- The Button HTML Element (Arrow Up/Carrot) -->

<button onclick="scrollToTop()" id="backToTopBtn" aria-label="Go to top">

    &#8593; <!-- Changed to Black Up-Pointing Triangle (a common 'carrot' style) -->

</button>

<script>

    // Get the button element

    const backToTopBtn = document.getElementById("backToTopBtn");

    // Function to scroll the document to the top smoothly

    function scrollToTop() {

        // Use smooth scrolling if supported, otherwise fall back to immediate scroll

        window.scrollTo({

            top: 0,

            behavior: "smooth"

        });

    }

    // When the user scrolls down 300px from the top of the document, show the button

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {

        // Check both documentElement (for most browsers) and body (for older ones)

        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {

            backToTopBtn.style.display = "block";

        } else {

            backToTopBtn.style.display = "none";

        }

    }

    // Attach the globally defined function to the window object so it's accessible from the onclick attribute window.scrollToTop = scrollToTop;

</script>

<!-- END: Back to Top Button Implementation -->

End Code in Footer

2. Implementation Steps in HubSpot

Navigate to Settings: In your HubSpot portal, click the Settings icon (gear) in the main navigation bar.

Go to Website > Pages: In the left sidebar navigation, expand the "Website" section and click on Pages.

Find the Templates Tab: At the top of the screen, click the Templates tab.

Edit Site Footer HTML: Scroll down to the Site Footer HTML section.

Paste the Code: Paste the entire code block you copied from Step 1 into the text area of the Site Footer HTML section.

Save Changes: Scroll to the bottom and click the Save button.

Why the Footer HTML?

Placing this code in the Site Footer HTML ensures that it is loaded right before the closing </body> tag on every single page served by HubSpot (including all blog posts and landing pages associated with your chosen domain), making it the perfect global solution for the Interactive theme.

3. Testing and Customization

Test: Go to any page on your live website, scroll down past the top section, and the circular black button with the bright green (#6cca0b) carrot arrow should appear in the bottom right corner. Clicking it should smoothly scroll you back to the top.

Customization: If you want to change the look, you can easily modify the CSS within the <style> tags in the code block.

Future Customization Instructions

To adjust the three elements look for the following lines within the code block in your Site Footer HTML:

Feature to Change

Section in Code

Property/Value to Edit

Description

Arrow/Carrot Character

<button> HTML Element

&#x25B2;

Change this HTML entity to a different symbol. Common alternatives are: ^ (simple caret), &#8657; (double up arrow), or &#8679; (the original thick arrow).

Arrow/Carrot Color

#backToTopBtn CSS

color: #6cca0b;

Replace #6cca0b with any desired hex code or color name (e.g., red, blue).

Arrow/Carrot Size

#backToTopBtn CSS

font-size: 30px;

You can increase or decrease the pixel value (30px) to change the size of the arrow symbol inside the button.

[Anton · Accepted solution]

Hey @deepapatel, 

you need to add some JavaScript (to your main.js or as a seperate js file) like this one

// Back to top functionality
  function initBackToTop() {
    const backToTopButton = document.createElement('button');
    backToTopButton.innerHTML = '↑';
    backToTopButton.className = 'back-to-top';
    backToTopButton.setAttribute('aria-label', 'Zurück nach oben');
    
    document.body.appendChild(backToTopButton);
    
    // Show/hide button based on scroll position
    function toggleBackToTop() {
      if (window.pageYOffset > 100) {
        backToTopButton.classList.add('back-to-top--visible');
      } else {
        backToTopButton.classList.remove('back-to-top--visible');
      }
    }
    
    // Scroll to top function
    function scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
    
    window.addEventListener('scroll', toggleBackToTop);
    backToTopButton.addEventListener('click', scrollToTop);
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBackToTop);
  } else {
    initBackToTop();
  }

and some CSS like

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #007cba;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top:hover {
  background-color: #005a87;
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
}

/* Responsive Design */
@media (max-width: 768px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
    font-size: 16px;
  }
}

My personal recommendation is to create seperate files like back-to-top.js and back-to-top.css in the corresponding folders in your theme. Add the back-to-top.js below by adding

{{ require_js(get_asset_url('path/to/back-to-top.js')) }}

below the 

{{ standard_footer_includes }} 

in your layout.html (or base.html) which should be located in templates/layout folder.

For the back-to-top.css, add it to your main.css by using

{% include 'path/to/back-to-top.css' %}

Last but not least, add a

<a href="#" class="back-to-top"></a>

to your layout.html (or base.html). 

Another option would be to create a custom module with similar code and add the custom module to the layout.html (or base.html; what ever it's called in your case)

best, 

Anton

p.s.:
Feel free to modify the css with some theme variables