用html css js 制作一个简单的滚动画面必须用jquery来实现
时间: 2024-03-22 20:37:39 浏览: 21
不必要使用 jQuery 来实现一个简单的滚动动画。实际上,您可以使用原生 JavaScript 来实现滚动动画。
以下是一个使用纯 JavaScript 实现滚动动画的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>滚动动画</title>
<style>
body {
height: 2000px;
}
#scroll-button {
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
background-color: #007bff;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="scroll-button">滚动</button>
<script>
var button = document.getElementById('scroll-button');
button.addEventListener('click', function() {
var start = document.body.scrollTop;
var end = 0;
var duration = 1000; // 1 秒
var startTime = null;
function scroll(currentTime) {
if (startTime === null) {
startTime = currentTime;
}
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, start, end - start, duration);
document.body.scrollTop = run;
if (timeElapsed < duration) {
requestAnimationFrame(scroll);
}
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) {
return c / 2 * t * t + b;
}
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
};
requestAnimationFrame(scroll);
});
</script>
</body>
</html>
```
该示例演示了如何使用 JavaScript 实现一个基本的滚动动画,它包括一个按钮,当用户单击该按钮时,页面将平滑滚动到顶部。
请注意,该示例使用 `requestAnimationFrame()` 方法来平滑滚动页面。此外,它还包括一个简单的缓动函数,用于使页面滚动更自然。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)