Go to on page top Button (No Page Refresh)

 

✅ 

1️⃣ Use a <button> or <a> that doesn’t submit

Replace your existing button HTML with this:

<button type="button" id="backToTopBtn" title="Go to top">
  ⬆️
</button>

🔹 The key is type="button" — this prevents APEX or the browser from treating it as a form submit button.

Or, alternatively, use a link:

<a href="javascript:void(0)" id="backToTopBtn" title="Go to top">⬆️</a>

---

2️⃣ Keep the CSS (same as before)

#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9999;
  font-size: 22px;
  border: none;
  outline: none;
  background-color: var(--ut-button-primary-bg, #4CAF50);
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
#backToTopBtn:hover {
  background-color: var(--ut-button-primary-bg-hover, #45a049);
  transform: scale(1.1);
}

---

3️⃣ Add the JavaScript (no refresh, smooth scroll)

Put this in Page → Execute when Page Loads:

// Show or hide the button when scrolling
window.addEventListener("scroll", function () {
  const btn = document.getElementById("backToTopBtn");
  if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100) {
    btn.style.display = "block";
  } else {
    btn.style.display = "none";
  }
});

// Scroll smoothly to top when clicked (no page refresh)
document.getElementById("backToTopBtn").addEventListener("click", function (e) {
  e.preventDefault(); // stop any default button action
  $('html, body').animate({ scrollTop: 0 }, 'slow');
});

---

💡 Tip:

If you’re using Universal Theme, you can even make the button blend with APEX styles by using:

#backToTopBtn {
  background-color: var(--ut-button-primary-bg);
  color: var(--ut-button-primary-text);
}
#backToTopBtn:hover {
  background-color: var(--ut-button-primary-bg-hover);
}

---

✅ Result:

• Appears when user scrolls down

• Smoothly scrolls to top

• No refresh / no page reload / no URL change

• Looks native to APEX theme