Powered By Blogger

শনিবার, ১১ অক্টোবর, ২০২৫

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

Row-level “Add” icon using a virtual column (APEX-safe)

1️⃣ Enable Insert in the Interactive Grid IG → Attributes Edit → Allowed Add Row → Yes 2️⃣ Add a New Column (Icon column) Column...