我希望在滚动时平滑过渡和更改背景颜色，最好只使用CSS，并将以下内容作为一个很好的示例：https://minimill.co/
如何在更改背景颜色时实现平滑过渡？而且，当在导航栏上单击按钮时，导航到该页面的特定部分？我试图查看源代码，但没有任何帮助。整个源代码在一行。
谢谢你，一定会投票并接受回答。
答案 0 :(得分：0)
试试这个css：
-webkit-transition: background-color 1000ms linear;
我很快就看到了我的小提琴： https://jsfiddle.net/kreza/4jfy1rhg/2/
答案 1 :(得分：0)
没有额外插件
如果您只想使用JavaScript，那么您可以使用此解决方案。
在下面的代码中，我有3个div，每个div都有属性data-color，其中包含当用户超过该div时我们想要在背景上拥有的颜色。我做了这样的颜色变化不仅在div位于页面顶部时，而且当我们在preius div的2/3之后。
当用户滚动时，调用document.onscroll = function() {下方的函数。此函数循环遍历所有div（信用：https://stackoverflow.com/a/11291363/7053344）和if（if (scrollTop > curDiv.offsetTop - heightBefore){），滚动顶部大于div的顶部（curDiv.offsetTop）减去1/3上一个div（heightBefore）的高度，然后根据div的data-color属性更改背景。通过以下方式实现背景颜色变化的平滑过渡：CSS上的transition: background 1.5s;。
下面还包括您想要的跳转。从第一个div开始，有一个链接可以将您发送到第二个div等。您可以修改它们以适合您的导航栏。为了更好地理解跳跃，您可以查看here。
JSFiddle：https://jsfiddle.net/0pe5n97z/2/
var test = document.getElementById("test");
document.onscroll = function() {
scrollTop = document.documentElement.scrollTop;
test.innerHTML = scrollTop;
allDivs = document.getElementsByTagName('div');
for( i=0; i< allDivs.length; i++ )
{
curDiv = allDivs[i];
// The code below makes the background color change when the
// scroll top passes the 2/3 of the previous div.
heightBefore = 0;
if (i > 0){
heightBefore = allDivs[i-1].offsetHeight / 3;
}
if (scrollTop > curDiv.offsetTop - heightBefore){
color = curDiv.getAttribute("data-color");
document.body.style.background = color;
}
}
};body {
background: green;
transition: background 1.5s;
}<body>
<div style="position:fixed" id="test"></div>
<center>
<div id="div1" data-color="green">
<p>Title goes Here</p>
<a name="green">
<p>Green area</p>
Go To <a href="#red" style="color:red">Red area</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div2" data-color="red">
<a name="red">
<p>Red area</p>
Go To <a href="#blue" style="color:blue">Blue area</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div3" data-color="blue">
<a name="blue">
<p>Blue area</p>
Return To <a href="#green" style="color:green">Green area</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</center>
</body>
<强>更新
为了使它在不同的浏览器上运行，你必须在CSS中添加这些行：
-webkit-transition: background 1.5s;
-moz-transition: background 1.5s;
-ms-transition: background 1.5s;
-o-transition: background 1.5s;
transition: background 1.5s;
然后在javascript中更改scrollTop初始化：
scrollTop = document.documentElement.scrollTop;
到此：
scrollTop = window.pageYOffset;
您可以在此更新的JSFiddle中对其进行测试。
此次更新的来源：
WITH EXTRA PLUGINS
关于你的问题：
滚动时平滑过渡和更改背景颜色
正如我在评论中所写，这些来源非常有用：
这些链接中的示例使用javascript，jquery和其他插件，我认为这些插件是必要的。
关于你的问题：
在导航栏上单击按钮时，导航到页面的特定部分
此链接解释得非常好：
下面是您想要的一个小例子，它是通过使用和组合上述链接中的内容而创建的：
$( window ).ready(function() {
var wHeight = $(window).height();
$('.slide')
.height(wHeight)
.scrollie({
scrollOffset : -50,
scrollingInView : function(elem) {
var bgColor = elem.data('background');
$('body').css('background-color', bgColor);
}
});
});* { box-sizing: border-box }
body {
font-family: 'Coming Soon', cursive;
transition: background 1s ease;
background: #3498db;
}
p {
color: #ecf0f1;
font-size: 2em;
text-align: center;
}
a {
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>
<div class="main-wrapper">
<div class="slide slide-one" data-background="#3498db">
<p>Title</p>
<center>Go To <a href="#green" style="color:green">Green</a>.</center>
</div>
<div class="slide slide-two" data-background="#27ae60">
<a name="green">
<p>Green area</p>
<center>Go To <a href="#red" style="color:red">Red</a>.</center>
</a>
</div>
<div class="slide slide-three" data-background="#e74c3c">
<a name="red">
<p>Red area</p>
<center>Page over. Hope that was helpful :)</center>
</a>
</div>
</div>
其他方法：