Joe Consterdine Joe Consterdine - 1 month ago 9
jQuery Question

How do I get the hash of each link?

I'm trying to code an active link state on scroll per section.

I'm trying to get the hash of the link.

My current code is for this line 'console.log($(this).eq(i).hash);' is returning 'undefined'.

Thanks

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll</title>
<style media="screen">
body, html {
padding: 0;
margin: 0;
}
section {
padding: 6rem;
text-align: center;
}
section:nth-child(1) {
background: orangered;
}
section:nth-child(2) {
background: steelblue;
}
section:nth-child(3) {
background: orange;
}
section:nth-child(4) {
background: purple;
}
section:nth-child(5) {
background: red;
}
section:nth-child(6) {
background: black;
color: #fff;
}

nav {
background: black;
color: #fff;
padding: 2rem 0;
text-align: center;
position: fixed;
top: 0;
width: 100%;
}

ul {
display: inline-block;
}

ul > li {
display: inline-block;
padding-right: 5px;
}

.active {
background: grey!important;
}
</style>
</head>
<body>
<nav>
<ul>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<a href="#section4">Section 4</a>
<a href="#section5">Section 5</a>
<a href="#section6">Section 6</a>
</ul>
</nav>
<section>
<h2 id="section1">Section 1</h2>
</section>
<section>
<h2 id="section2">Section 2</h2>
</section>
<section>
<h2 id="section3">Section 3</h2>
</section>
<section>
<h2 id="section4">Section 4</h2>
</section>
<section>
<h2 id="section5">Section 5</h2>
</section>
<section>
<h2 id="section6">Section 6</h2>
</section>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("a[href^='#']").each(function(i){
console.log($(this).eq(i).hash);
});
$(window).scroll(function(){
$("section").each(function(i){
if( $(document).scrollTop() >= $("section").eq(i).offset().top) {
$("section").eq(i).addClass("active");
} else {
$("section").eq(i).removeClass("active");
}
});
});
</script>
</body>
</html>

Answer

The jquery object doesn't have a hash property, the underlying dom element does

Instead of

$(this).eq(i).hash

Try

this.hash