Make category banners clickable to a category section

[GarajeQuija209]

Basically, my category pages have quite a bit of content. Especially on mobile devices when you read all the content and get to the bottom of the page, it takes time to scroll all the way back up to the top and access products etc. So presently on my category pages, the category banner is the last element of the category page layout.

I wanted to treat this section more as a CTA and basically get visitors back on track. So the bottom of the category page could say something like "still interested? Click here" and the goal would be to take them back to the top of the category page where they would see either subcategory and/or product links.

I know I could do an ONCLICK link inside the div like #top but is there a better way tohandle this? Like maybe not top of the whole site but top of the main category content or better yet like #category-view-container? Also is using an anchor text the best method?

[Milople]

Hello @GarajeQuija209,

Yes, using an anchor link (<a href="#your-target-id">) is a simple and effective method, but you can refine it for a better user experience.

Instead of #top, target the main content container of your category page. Magento 2 typically uses id="maincontent" for the main page content, but if your category product listing has a specific wrapper, you can target that instead.

For ex:

<div class="category-cta">

    <p>Still interested? <a href="#category-product-list">Click here</a> to view products.</p>

</div>

Instead of a hard jump using an anchor link, you can add smooth scrolling with JavaScript for a better user experience.

JavaScript Solution:

Place this inside a custom .js file or inline within a <script> tag:

document.addEventListener("DOMContentLoaded", function () {

    document.querySelector(".category-cta a").addEventListener("click", function (e) {

        e.preventDefault();

        const target = document.querySelector("#category-product-list");

        if (target) {

            window.scrollTo({

                top: target.offsetTop - 20, // Adjust for spacing if needed

                behavior: "smooth"

            });

        }

    });

});

For simplicity → Use an anchor link (<a href="#category-product-list">).

For better UX → Use JavaScript smooth scrolling.

If the issue is resolved, click Kudos and accept it as a solution.