jquery - 使用 css/jquery 创建选定的滚动按钮。

Question

我正在构建一个包含 3 个部分的登陆页面。每个部分都是一个完整的页面部分(浏览器的 width:100%; x height:100%)div 及其自己的 ID。我在每个目标中都有一个目标，当按下时， scrollTo 是正确的部分。

<div class="page-section clear" id="Welcome">
    <div class="wrapper clear">
        <a href="#we-are-the-leader" class="downW">
            <i class="fa fa-angle-down"></i>
         </a>
    </div>
</div>

<div class="page-section clear" id="we-are-the-leader">
    <div class="wrapper clear">
        <a href="#Services" class="downW">
            <i class="fa fa-angle-down"></i>
         </a>
    </div>
</div>
<div class="page-section clear" id="Services">
    <div class="wrapper clear">
        <a href="#Services" class="downW">
            <i class="fa fa-angle-down"></i>
         </a>
    </div>
</div>

<script>
jQuery(function($) {
    $(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

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

            var navBarHeight = 0; // change if nav bar height changes
            $('html, body').stop().animate({
                'scrollTop': ($target.offset().top - navBarHeight)
            }, 1000, 'easeInOutQuint', function () {
                window.location.hash = target;
            });
        });
    });
});
</script>

这对我来说非常有效，但现在我想添加三个 css“按钮”，当选择与它们关联的部分时，这些按钮具有特定的颜色。我知道它将利用与我已经实现的相同的概念，但我正在学习 jQuery，并且不确定与现有 scroll 函数相关的最佳方法。

Answer 1

更改动画回调中按钮的 css 类:

jQuery(function($) {
    $(document).ready(function(){
        var buttons = $('a[href^="#"]');
        var clearAllSelected = function () {
            $.each(buttons, function () {
                $(this).removeClass('.selected-class').addClass('.unselected-class');
            });
        };
        buttons.on('click',function (e) {
            clearAllSelected ();
            var button = $(this);

            e.preventDefault();

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

            var navBarHeight = 0; // change if nav bar height changes
            $('html, body').stop().animate({
                'scrollTop': ($target.offset().top - navBarHeight)
            }, 1000, 'easeInOutQuint', function () {
                window.location.hash = target;
                button.removeClass('.unselected-class')
                   .addClass('.selected-class');
            });
        });
    });
});