topic Re: Landing Page Buttons Go Back to Top of Page or Form in Blog, Website & Page Publishing

Landing Page Buttons Go Back to Top of Page or Form

MDePardo — Thu, 18 Sep 2025 18:46:05 GMT

Hi Everyone!

I am currently trying to build a landing page in HubSpot's drag and drop module feature, but I am running into an issue with my buttons.

I want to have buttons throughout the landing page that bring the user back to the top of the page to fill out of the form.

I can't seem to find the option that has the button float to the top of the page and the solutions I have found involve a lot of coding that I do not understand nor see how to do in the drag and drop menus.

Thank you,

Matt

Re: Landing Page Buttons Go Back to Top of Page or Form

Jon-PrairiePath — Thu, 18 Sep 2025 19:48:23 GMT

Hi Matt,

What you're looking for here is an anchor. You need to do two thigns: 1) set an anchor point where you want page visitors to be brought to on the page and 2) point the button to the anchor.

Here's how:

In a rich text area above the form, choose the Insert menu (in the RTE) and select Anchor.
Give yoru anchor a name with no spaces (form should do it)
In the butotn settings select either Anchor or External in the Link to setting (if the Anchor option is not available in your theme, External should be available)
If Link to: Anchor is available, simply select the anchor you just created. If you are using Link to: external enter # followed by the exact name, capitalization and all, of the anchor you created (ex: #form)

Re: Landing Page Buttons Go Back to Top of Page or Form

MDePardo — Fri, 19 Sep 2025 15:01:29 GMT

Hi Jon!

Thank you so much, I used the anchor with #form and it worked!

Re: Landing Page Buttons Go Back to Top of Page or Form

deepapatel — Tue, 28 Oct 2025 00:15:10 GMT

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

Re: Landing Page Buttons Go Back to Top of Page or Form

BérangèreL — Tue, 28 Oct 2025 10:40:58 GMT

Hi @deepapatel, and great question, thanks for asking the HubSpot Community!

Here is an article that might help: "Insert and manage anchor links".

Are you using a HubSpot page or an external page? If yes, which theme are you using, please?

Here are some similar threads that might help:

- The solution from @tjoyce on this post "How to create a CTA that jumps down the page"
- The solution from @Stephanie-OG on this post "Adding a second CTA to top nav"

Let us know if you need more guidance, we are here for you! 🧡

Have a wonderful day!
Bérangère

Re: Landing Page Buttons Go Back to Top of Page or Form

deepapatel — Tue, 28 Oct 2025 22:40:18 GMT

Google Gemini to the rescue. Here is the code I added to the footer settings in HubSpot, and it works.

<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>

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

// 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>

Re: Landing Page Buttons Go Back to Top of Page or Form

BérangèreL — Wed, 29 Oct 2025 09:19:30 GMT

Hi @deepapatel and thanks for sharing your solution and code!

This will be helpful for others looking to add a back-to-top button on their HubSpot landing pages.

If anyone wants to share their own variations, feel free to jump in.

Have a lovely day!
Bérangère