How can I stop the page refreshing and scrolling to the top when a blog filter tag is selected?

Technical Q&A
,

Topic summary

Issue: Clicking a blog filter tag causes a full page refresh and scrolls the user to the top, disrupting reading position.

Context: In a Liquid template (main-blog-liquid), a filter UI is rendered when tags exist. The code loops over blog.all_tags to list tags, placed above a paginate block ({%- paginate blog.articles by 6 -%}). Example tag: “How-to guides.”

Goal: Prevent the jump-to-top behavior by either maintaining scroll position after applying a filter or applying the filter without a full page reload (e.g., no whole page refresh/scroll).

Key details:

  • Code snippet is central to understanding (Liquid conditionals/loops for tags, pagination declaration).
  • Technologies referenced: HTML/JavaScript context; Liquid templating syntax is used.

Status: No solutions or workarounds provided yet; no decisions or outcomes. The question remains open with no confirmed approach to avoid refresh/scroll when filtering by tags.

Summarized with AI on December 23. AI used: gpt-5.
1

I’ve created filter tags for blog posts by inserting this code below in main-blog-liquid:

{% if blog.tags.size > 0 %}
      
        

          

            - Filter by:

          - {{ 'All Topics' }}
            
          

            {% for tag in blog.all_tags %}
            - {{ tag }}
              
            
            {% endfor %}
          

        

      

    {% endif %}

Underneath this piece of code:

{%- paginate blog.articles by 6 -%}
  
    # {{ blog.title | escape }}

However when a filter tag is selected (e.g “How-to guides”) the page refreshes and the user is scrolled to the top of the page when the filter is applied.

Is there a way to edit this code so when the filter is clicked the user isn’t scrolled to the top of the page or the filter is applied with no whole page refresh and scroll.

Thanks,