jQuery平滑滚动到当前类的部分

Question

我还在学习jQuery的基础知识，我从这个网站的用户回答中获得了有趣的代码。但是我需要为它添加一些功能 - 当它们到达相应的部分时，我需要将当前状态添加到锚点。我需要设置班级.on-section

＆＃13;

＆＃13;

$('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;
            });
        });

＆＃13;

.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;  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用jQuery的addClass功能。

要修复范围问题，请创建一个名为self的变量，其值为$(this)。

使用self.addClass('on-section')将类添加到已单击的锚标记中。

＆＃13;

＆＃13;

$('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');
            });
        });

＆＃13;

.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;  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;