我已经成功让滚动工作了这里：
但在我的网站上它无法正常工作。有什么想法吗？本质上是同一件事。抱歉，因为它真的很长，我只是不确定问题到底出在哪里
html:
<body>
<div class='container'>
<nav class='sidebar'>
<ul>
<li class='main'>
<a href='#'>0</a>
</li>
<li class='subset' id='first-element'>
<a href='#'>1</a>
</li>
<li class='subset' id='second-element'>
<a href='#'>2</a>
</li>
<li class='subset' id='third-element'>
<a href='#'>3</a>
</li>
</ul>
</nav>
<div class='window-top' id='window-top'>
<div class='section' id='first'>1</div>
<div class='section' id='second'>2</div>
<div class='section' id='third'>3</div>
</div>
<div class='window'>
</div>
</div>
<script src='js/script.js'></script>
<script src='js/classie.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
JS：
$( document ).ready(function() {
$('#first-element').on('click', function(){
$('html, body').animate({
scrollTop: $('#third').offset().top
}, 500);
});
});
一些相关的（？）CSS：
.window-top{
left:25%;
float:right;
width:75%;
background-image: url('../pic/bg.png');
height:80%;
}
.section
{
height:100%;
min-width:100%;
}
#second{
background-color:blue;
}
#third{
background-color:green;
}
您需要在 jQuery 之后调用脚本：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/script.js'></script>
<script src='js/classie.js'></script>
或者
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$( document ).ready(function() {
$('#first-element').on('click', function(){
$('html, body').animate({
scrollTop: $('#third').offset().top
}, 500);
});
});
jQuery需要加载后才能使用。
现在有一个非常简单的解决方案：只需使用普通的锚链接并将此代码添加到您的CSS中：
html {
scroll-behavior: smooth;
}
询问时它还不可用，但现在它已被浏览器广泛支持。