return false for all a href's

Question

** Update ** Got it: In case anyone whats to know how to do this. I used the following code. Paste this in your header so it fires everywhere.

history.pushState("", document.title, window.location.pathname);

Credits go to this answer https://stackoverflow.com/a/16719657/4367486

The #item_1 is just visable for a split second and then it's removed. I'm happy with it.

I was wondering, is this possible? I have a one page design with 3 pages that are not on the front page. But I don't like to link back to the front page and have www.example.com/#something behind it. But I would like to have visitors go back to the part of the page that they were on.

This is my menu structure:

<ul class="section table-of-contents hide-on-med-and-down">
 <li><a href="<?php echo site_url(); ?>" style="display:none;">Home</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_1">Item 1</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_2">Item 2</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_3">Item 3</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_4">Item 4</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_5">Item 5</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_6">Item 6</a></li>
 <li><a href="<?php echo site_url(); ?>/#item_7">Item 7</a></li>
</ul>

My page structure:

<article id="item_1" class="scrollspy">
  <div id="id_item_1">
    <div class="container">
    <h2><?php the_title(); ?></h2>
      <div class="row">      
         .....
      </div>
    </div>
  </div> 
</article>
<article id="item_2" class="scrollspy">
  <div id="id_item_2">
    <div class="container">
    <h2><?php the_title(); ?></h2>
      <div class="row">      
         .....
      </div>
    </div>
  </div> 
</article>

So I'm using anchors to jump to points on the front page.

This is a snippet for smooth scrolling. But it targets all A elements on a page. Is it possible to "rebuild" this code to do what I want, return falst; on all A elements...

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Im guessing I have to use javascript, but what would the code look like? Thanks for the help!

Neeraj · Answer 1 · 2016-06-17T11:36:44.443

1

Try using jquery-hashchange js plugin. Hope this will help.
Further you can try AngularJS very much suitable for 1 page websites. see an example here : https://docs.angularjs.org/api/ngRoute/directive/ngView

The other way you can use HTML5 onpopstate event

 window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
 };

Here is a good example for it:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

edited Jun 17 '16 at 11:36

answered Jun 17 '16 at 11:19

Neeraj

234
1
14

Hmm, I'll look into those. but there must be a simpler way to achieve this... right? – Steggie Jun 17 '16 at 11:25
Yes, you can go with HTML5 **onpopstate** event , see my edit . Thanks. – Neeraj Jun 17 '16 at 11:37

score 0 · Answer 2 · answered Jun 17 '16 at 11:15

0

'<script>
 function abc()
 {  
   window.history.back();
 }
 </script>'

answered Jun 17 '16 at 11:15

The developer

194
1
3
15

Yeah, I have thought about that as well, but when a visitor is on one of the "seperate" pages and goes to an other "seperate" page and then clicks on a item in the navigation menu he returns to the "seperate" page and not the front page. So that one won't fly. – Steggie Jun 17 '16 at 11:17

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

In case anyone whats to know how to do this. I used the following code. Paste this in your header so it fires everywhere.

history.pushState("", document.title, window.location.pathname);

Credits go to this answer https://stackoverflow.com/a/16719657/4367486

The #item_1 is just visable for a split second and then it's removed. I'm happy with it.

edited May 23 '17 at 11:55

Community

1
1

answered Jun 17 '16 at 12:38

Steggie

525
8
31

return false for all a href's

3 Answers3