😁🤗 Click → Scroll Back to a Specific Element (Anchor Link), click back to element in elementor (ok)

/**
 * !Add JS in the footer
 */
add_action('wp_footer', function() { ?>
<script>
document.querySelectorAll('.scroll-back').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});
</script>
<?php
});
/**
 * Add JS in the footer!
 */

In Elementor (WordPress), there are a few common meanings for “click back to element”. Below are the correct ways to do it, depending on what you want 👇

---

1️⃣ Click → Scroll Back to a Specific Element (Anchor Link)

👉 Most common use case

Steps:

1. Select the target element

   • Click the section / column / widget

   • Go to Advanced → CSS ID

   • Enter an ID (no spaces), example:

     back-top

2. Create the “Back” button / link

   • Add a Button or Text

   • In Link, type:

     #back-top

3. Enable smooth scrolling (optional)

   • Elementor → Site Settings → Layout

   • Turn on Smooth Scroll

✅ Result: Clicking the button scrolls back to that element

---

2️⃣ Back to Previous Section (Using Browser History)

👉 True “go back” behavior

Button link:

javascript:history.back();

⚠️ Notes:

• Goes back to previous page, not always a section

• Depends on browser history

• Not recommended for UX in most cases

---

3️⃣ Back to Top Button (Elementor Native Way)

Option A: Elementor Icon

1. Add Icon widget

2. Choose arrow-up icon

3. Link:

   #top

Option B: Custom ID

• Add CSS ID top to your header section

---

4️⃣ Click Back to Element With Offset (Sticky Header Fix)

If you have a sticky header, add CSS:

html {
  scroll-padding-top: 100px;
}

👉 Adjust 100px to your header height

Add in:

• Appearance → Customize → Additional CSS

• or Elementor → Site Settings → Custom CSS (Pro)

---

5️⃣ Advanced: Back to Element with Animation (JS)

If you want custom easing:

<a href="#section1" class="scroll-back">Back</a>

<script>
document.querySelectorAll('.scroll-back').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});
</script>

---

🔥 Best Practice Recommendation

✔ Use CSS ID + anchor link ✔ Avoid history.back() unless necessary ✔ Always consider sticky header offset

---

👉 Tell me:

• Do you want scroll back on same page or go back to previous page?

• Desktop only or mobile too?

• Sticky header enabled?

I’ll tailor the exact solution for your site 🚀