Dawid Dawid - 23 days ago 10
jQuery Question

jQuery smooth scroll to sections with current class

I am still learning basics of jQuery, I've got interesting code from one of user's answer from this site. But I need to add some functionality to it - I need to add current state to anchors when they reach corresponding sections. I need to set the class

.on-section




$('a[href^="#"]').on('click',function (e) {
e.preventDefault();

var target = this.hash;
$target = $(target);

$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 1000, function () {
window.location.hash = target;
});
});

.anchor-menu {
position: fixed;
z-index: 690;
right: 5%;
margin: auto;
top: 50%;
transform: translate(-50%, -50%);
}

.anchor-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}

.anchor-menu ul li {
margin-top: 12px;
margin-bottom: 12px;
}

.anchor-menu ul li a {
display: block;
width: 15px;
height: 15px;
background-color: #000;
border: 1px solid #fff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}

.anchor-menu ul li a:hover {
background-color: #ffae2a;
}

.anchor-menu ul li a.on-section {
background-color: #cb016f;
}

section {
height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="anchor-menu">
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
</ul>
</div>
<section id="one">
one
</section>
<section id="two">
two
</section>
<section id="three">
three
</section>
<section id="four">
text
</section>




Answer

You can use the addClass functionality of jQuery.

To fix the scope issues create a variable called self with the value of $(this).

Use self.addClass('on-section') to add the class to the anchor tag that has been clicked.

$('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

            var self = $(this);

            var target = this.hash;
            $target = $(target);

            $('html, body').stop().animate({
                'scrollTop':  $target.offset().top + 2
            }, 1000, function () {
                window.location.hash = target;
                $('a[href^="#"]').removeClass('on-section');
                self.addClass('on-section');
            });
        });
.anchor-menu {
    position: fixed;
    z-index: 690;
    right: 5%;
    margin: auto;
    top: 50%;
    transform: translate(-50%, -50%);
}

.anchor-menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.anchor-menu ul li {
    margin-top: 12px;
    margin-bottom: 12px;
}

.anchor-menu ul li a {
    display: block;
    width: 15px;
    height: 15px;
    background-color: #000;
    border: 1px solid #fff;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}

.anchor-menu ul li a:hover {
    background-color: #ffae2a;
}

.anchor-menu ul li a.on-section {
    background-color: #cb016f;
}

section {
  height: 100vh;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="anchor-menu">
            <ul>
                <li>
                    <a href="#one"></a>
                </li>
                <li>
                    <a href="#two"></a>
                </li>
                <li>
                    <a href="#three"></a>
                </li>
                <li>
                    <a href="#four"></a>
                </li>
            </ul>
        </div>
<section id="one">
one
</section>
<section id="two">
two
</section>
<section id="three">
three
</section>
<section id="four">
text
</section>