Javascript 使jQuery行动画在滚动上移动

我在我的网站上有一条线，当锚元素被点击时，它会在锚元素下设置动画。我想让它也动画时，用户滚动到相应的部分，而不必点击链接，但我似乎有一些麻烦这样做

这是我的密码：

HTML

<header id="header">
        <div class="container">
            <nav id="example-one">
                <ul>
                    <li class="current_page_item"><a class="nav" href="#home">Welcome</a></li>
                    <li><a class="nav" href="#featuredWork">Work</a></li>
                    <li><a class="nav" href="#caseStudy">Case Study</a></li>
                    <li><a class="nav" href="#about">About</a></li>
                    <li><a class="nav" href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

jQuery

$( window ).load(function() {

//Grabs the height value of the header, can use this variable later for css media queieres instead of hardcoding pixel value
var headerHeight = document.getElementById('header').offsetHeight;

//Sets top values of sections to later be used in colour change segment



//Allows for smooth scrolling
var $root = $('html, body');
$('a[href*=#]').click(function() {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
    }, 600);
    return false;
});

//Change colour of header bar and elements based on which section the user is on
$(document).scroll(function() {

    var top1 = $('#home').offset().top;
    var top2 = $('#featuredWork').offset().top - headerHeight;
    var top3 = $('#caseStudy').offset().top - headerHeight;
    var top4 = $('#about').offset().top - headerHeight;
    var top5 = $('#contact').offset().top - headerHeight;


  if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) {
    $('#header').css('background-color', '#dadfe0');
    $('.nav').css('color', '#21303f');
  } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) {
    $('#header').css('background-color', '#21303f');
    $('.nav').css('color', '#dadfe0');
  } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) {
    $('#header').css('background-color', '#dadfe0');
    $('.nav').css('color', '#21303f');
  } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) {
    $('#header').css('background-color', '#21303f');
    $('.nav').css('color', '#dadfe0');
  } else if ($(document).scrollTop() >= top5) {
    $('#header').css('background-color', '#dadfe0');
    $('.nav').css('color', '#21303f');
  }  

});

//Magic line

$(function() {


    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */

    $("#example-one").append("<li id='magic-line'></li>");


    /* Cache it */
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)

    $("#example-one li").find("a").click(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });   
    });


});

});

$（窗口）.load（函数（）{
//获取标题的高度值，以后可以将此变量用于css媒体查询，而不是硬编码像素值
var headerHeight=document.getElementById（'header'）。offsetHeight；
//设置稍后在颜色更改段中使用的节的顶部值
//允许平滑滚动
var$root=$（'html，body'）；
$（'a[href*=#]'）。单击（函数（）{
$root.animate({
scrollTop:$（$.attr（this，'href'））.offset（）.top-headerHeight
}, 600);
返回false；
});
//根据用户所在的区域更改标题栏和元素的颜色
$（文档）。滚动（函数（）{
var top1=$（'#home'）.offset（）.top；
var top2=$（'#featuredWork'）.offset（）.top-headerHeight；
var top3=$（“#案例研究”）.offset（）.top-headerHeight；
var top4=$（'#about'）.offset（）.top-headerHeight；
var top5=$（'#contact'）.offset（）.top-headerHeight；
if（$（document）.scrollTop（）>=top1&&$（document）.scrollTop（）=top2&&$（文档）.scrollTop（）=top3&&$（文档）.scrollTop（）=top4&&$（文档）.scrollTop（）=top5）{
$（'#header'）.css（'background-color'，'#dadfe0'）；
$（'.nav'）.css（'color'，'#21303f'）；
}  
});
//幻线
$（函数（）{
/*通过JavaScript添加魔线标记，因为如果没有*/
$（“#示例一”）.append（“
”）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
$（“#示例一li”）。查找（“a”）。单击（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});   
});
});
});

我已经包含了整个jQuery文件，因为我已经有了一些用于更改标题颜色的滚动功能

这里还有我的投资组合网站，因为它现在的样子，所以你可以更好地了解我正在努力实现的目标

提前感谢您的帮助。

您可以通过查看菜单获得帮助：）

JS代码：

$(document).ready(function () {
    $(document).on("scroll", onScroll);

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

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
//平滑卷轴
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'a'）。每个（函数（）{
$（this.removeClass（'active'）；
})
$（this.addClass（'active'）；
var target=this.hash，
菜单=目标；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top+2
}，500，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'#菜单中心a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（“#菜单中心ul li a”）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}

您可以查看菜单以获取帮助：）

JS代码：

$(document).ready(function () {
    $(document).on("scroll", onScroll);

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

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
//平滑卷轴
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'a'）。每个（函数（）{
$（this.removeClass（'active'）；
})
$（this.addClass（'active'）；
var target=this.hash，
菜单=目标；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top+2
}，500，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'#菜单中心a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（“#菜单中心ul li a”）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}