Joe Consterdine Joe Consterdine - 1 year ago 60
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 Source

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

Instead of

$(this).eq(i).hash

Try

this.hash