0

Let's say someone clicks on:

<a href="#" class="filter">Stillness Furniture</a>

The link in the browser will just go to whatever.com/page/#

Here is the code housing that link:

<nav id="portfolio-filter">
    <ul>
        <li class="filter"><a href="#" class="filter">View All</a></li>
        <li class="filter"><a href="#" class="filter">Stillness Furniture</a></li>
    </ul>
</nav>

I want the link to go to #portfolio-filter instead of just #, now obviously I could change the link href, but this is a WordPress theme and editing it would mean I have to change it every time I update the theme.

How would I be able to make the browser jump down to id#portfolio-filter when someone clicks that link?

Something like this is all I have so far?

$(document).on("click", "a.filter", function(){
   //do something
});

(taken from Onclick function based on element id)

Thanks in advance for any help.

Community
  • 1
  • 1
Matthew
  • 673
  • 1
  • 7
  • 16
  • 1
    You could update the href with javascript to be #whatever. Though I should mention any solution is probably going to suggest that you put some sort of id/class on the li/link so you know which one your dealing with, instead of relying on placement or checking inner html, of which both are very fragile and either changing would break your logic. – Taplar Jan 03 '16 at 18:32
  • @Taplar I have a class on the links, how would I go about doing what you suggest though? – Matthew Jan 03 '16 at 19:22
  • @Taplar I want them all to go to the same place, it's a tab system within my page but the # shoots to the top of the page every time where you have to scroll back down to see the tabs... so I just want it to shoot to the top of the tabs instead - by linking to #portfolio-filter which is already there - I just don't know how to do it. Could you point me in the right direction? – Matthew Jan 03 '16 at 19:24
  • 1
    Wait, so your saying -all- links inside portfolio-filter ul should go to the same #something? – Taplar Jan 03 '16 at 19:29
  • Yes, it sounds funny. There's actually other JS built into the theme controlling specific classes and link destinations when you click on it, but the link by default is always "#", which is annoying, so I want to change that without actually digging into the code so I can still update the theme. – Matthew Jan 03 '16 at 19:40

2 Answers2

1

I may propose you, without changing nothing to your anchor:

$(function () {
  $('a.filter').on("click", function( e ) {
    e.preventDefault();
    var offset = $('#portfolio-filter').offset().top;
    var visible_area_start = $(this).offset().top;
    var visible_area_end = visible_area_start + window.innerHeight;
    if(offset < visible_area_start || offset > visible_area_end) {
      $('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
    }
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<p>a</p><br>
<a href="#" class="filter">Stillness Furniture</a>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<p>a</p><br>
<nav id="portfolio-filter">
    <ul>
        <li class="filter"><a href="#" class="filter">View All</a></li>
        <li class="filter"><a href="#" class="filter">Stillness Furniture</a></li>
    </ul>
</nav>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
  • I appreciate your answer, @Taplar answered the question with what I wanted but your method is certainly very interesting as well =) – Matthew Jan 03 '16 at 19:42
1

So it seems like you want them to all go to the same place, if I understand you correctly. So you could rewrite the links if you wanted to...

$('#portfolio-filter').find('a.filter').attr('href', '#portfolio-filter');
Taplar
  • 24,788
  • 4
  • 22
  • 35