Disable href link when containing #, but enable all others

Question

So this mostly works, however, the only URL that works is what is specified as "Blog." All the anchor references with # are smooth scrolling on click but all my external links on my page aren't doing anything.

Can I write the prevent default in a way that only includes the href links with "#" in them? I have image links, etc throughout my page and want a simple method to manage it rather than pointing each url out.

<ul class="snip1143">
<li class><a href="#home1" data-hover="Home">Home</a></li>
<li><a href="#about1" data-hover="About">About</a></li>
<li><a href="#experience1" data-hover="Work">Work</a></li>
<li><a href="URL HERE" data-hover="Blog">Blog</a>   </li
<li><a href="#contact1" data-hover="Contact">Contact</a></li>

<script>

 $(document).on('click', 'a', function(event) {
  if($(this).data('hover') !== "Blog"){
  event.preventDefault();


  $('html, body').animate({
  scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  });

</script>

score 0 · Accepted Answer · answered Sep 15 '17 at 05:55

var doc = document;
var myList = doc.getElementsByClassName("snip1143")[0];
var myListItems = myList.children;
var isHash = false;
var href;
for (var i = 0; i < myListItems.length; i++) {
  href = myListItems[i].firstChild.getAttribute('href');
  isHash = href.includes("#");
  if(!isHash){
    myListItems[i].firstChild.addEventListener('click', function(evt) {
        event.preventDefault();
    });
    myListItems[i].classList.add("strike");
  }
}

.strike{
  text-decoration: line-through;
}

<ul class="snip1143">
  <li><a href="#home1" data-hover="Home">Home</a></li>
  <li><a href="#about1" data-hover="About">About</a></li>
  <li><a href="#experience1" data-hover="Work">Work</a></li>
  <li><a href="URL HERE" data-hover="Blog">Blog</a> </li>
  <li><a href="#contact1" data-hover="Contact">Contact</a></li>
</ul>

The Onin · Answer 2 · 2017-09-15T00:56:31.813

-1

Coded directly on SO, I hope I got it right:

$(document).on('click', 'a', function(e) {
  if ($(this).attr('href').indexOf('#') !== -1)
    e.preventDefault();
};

edited Sep 15 '17 at 00:56

answered Sep 15 '17 at 00:35

The Onin

5,068
2
38
55

The URL links are working but unfortunately no scrolling works for the anchor links. – Sam T Sep 15 '17 at 00:39
Remind me what happens if a link doesn't have an `href` specified. I'm pretty sure this code will throw an exception... particularly since you're targeting every anchor tag. Also, why would you use `$(this).attr('href')` rather than `this.href`? jQuery all the things, I guess... :/ – canon Sep 15 '17 at 00:39
@SamT If by "no scrolling works for the anchor links" you mean the animated effect, that's probably because you are creating the links after the document has initially rendered. Is that true? If so, let me know and I'll change my first line (`$('a').on('click', function(e) {`) into `$(document).on('click', 'a', function(event) {`. – The Onin Sep 15 '17 at 00:49
@canon Sure it will throw an exception, but all OP's links have a `href`, and in the real world, people put a # in the href attribute if they don't need to use a URL. Also, omitting href is a bad practice, see: https://stackoverflow.com/questions/5292343/is-an-anchor-tag-without-the-href-attribute-safe – The Onin Sep 15 '17 at 00:51
@NinoŠkopac not all anchors are hyperlinks... or even pseudobuttons. Sometimes an `` is just an anchor. And no, it doesn't make sense to set an `href="#"` on an [anchor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-name). – canon Sep 15 '17 at 00:52
@NinoŠkopac I believe so. I'm using everweb so they are in an HTML snippet. The entire contents I posted are within a snippet. The menu works great (everything specified in the code) but it's the URLs throughout the rest of the page that fail to open. – Sam T Sep 15 '17 at 00:54
@SamT I believe there's a little bit of a language barrier. Are you saying that when you click on anchors with #, you scrolling effect doesn't happen? I have updated my code as I mentioned in the previous comment, please re-try it. – The Onin Sep 15 '17 at 00:57
@canon I don't see the connection between your statement and your link. Could you copy/paste the relevant part? – The Onin Sep 15 '17 at 00:59
@NinoŠkopac thanks I will try when I get home. You're the man! – Sam T Sep 15 '17 at 02:18
@SamT No problem sir, happy to help. If it still doesn't work, please create a jsfiddle and we'll debug it. – The Onin Sep 15 '17 at 02:52
@NinoŠkopac When I click the anchor links they show the correct address but do not scroll. All URL links are working fine. In my original example, the opposite. No URL links work but all the anchor links scroll. It's strange. – Sam T Sep 15 '17 at 04:44
@NinoŠkopac I created a link like this (HERE) and it scrolls fine...but its outside the menu. – Sam T Sep 15 '17 at 05:07

Disable href link when containing #, but enable all others

2 Answers2