JavaScript 特效实例:缓慢回到顶部。onscroll事件,scrollTo()函数

最新推荐文章于 2024-06-23 18:20:41 发布

houyanhua1

最新推荐文章于 2024-06-23 18:20:41 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript scroll

本文链接：https://blog.csdn.net/houyanhua1/article/details/79573163

版权

本文通过JavaScript的onscroll事件和scrollTo()函数，详细介绍了如何创建一个平滑返回页面顶部的特效。在网页滚动时，提供了一个优雅的用户体验。

摘要由CSDN通过智能技术生成

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
			height: 100px;
			width: 50px;
			background-color: red;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：被卷去的头部超过200显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
            //难点：我们以前是移动盒子，现在是移动屏幕&#x