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

[Aday7]

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

    {% if blog.tags.size > 0 %}
      <div class="blog-filter">
        <div class="list-group">
          <ul id="BlogTagFilter" class="tag-list">
            <li>Filter by:</li>
          <li>
            <a href="{{ blog.url }}" class="button">
              {{ 'All Topics' }}
            </a>
          </li>
            {% for tag in blog.all_tags %}
            <li>
              <a href="{{ blog.url }}/tagged/{{ tag | handleize }}" class="button">
              {{ tag }}
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

Underneath this piece of code:

{%- paginate blog.articles by 6 -%}
  <div class="main-blog page-width section-{{ section.id }}-padding">
    <h1 class="title--primary">{{ blog.title | escape }}</h1>

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,