题目：

网页缓慢置顶回到顶部（ html、css、js）。。。鼠标点击回到顶部的盒子后，网页可先快后缓慢最终回到最初顶部。使用js的定时器实现。

问题描述：

鼠标点击回到顶部的盒子后，网页可先快后缓慢最终回到最初顶部。

解决：

1.先写一个div盒子，如可以把它固定定位到网页右下角，这样我们点击它时网页就可以回到顶部。当然，也可以把它放到任何的位置都是可以的。也可以用其它标签，只要定义的id是一样的就可以了。

盒子：

<div class="zd" id="ding">置顶</div>

样式：把其定位到网页右下角，也可以放在其它位置。

 .zd {position: fixed;bottom: 50px;right: 10px;background-color: rgb(155, 143, 143);}

效果：可以写好点样式更美观。我们要实现鼠标点击这个置顶后就可以先快后慢回到顶部。

*比如我们这样设计就美观许多：

2. js代码，实现功能

<script>var ding = document.getElementById('ding');ding.addEventListener('click', function () {var timer = setInterval(function () {var left = window.pageYOffset;var step = Math.ceil((left - 0) / 10);window.scroll(0, left - step);if (left == 0) {clearInterval(timer);}}, 30)})</script>

注意：script标签可以写在body的底部

总结

这样就可以实现了，我们点击，就可以先快后慢回到顶部了。

网页缓慢置顶回到顶部 html、css、js相关推荐

HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 c
HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表 ...
HTML5七夕情人节表白网页(绘制冬季下雪3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤绘制冬季下雪3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心这是程序 ...
教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）
女友的网页相册(一) 一丶相册效果二丶代码总结一丶相册效果未展开前展开后相册会自动旋转,底部还有倒影哦(展开时有个很nice的动画效果~). 可以滚动鼠标轮盘放大缩小使用鼠标还可以拖动相册 ...
php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件_javascript技巧
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
HTML网页设计制作大作业-文化HTML+CSS+JS网页设计期末课程大作业
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | H ...
网页前端大作业主界面（Html+CSS+JS+Axios）
介绍一下本代码块实现的效果,本代码快只实现了仿照游戏平台设计的一个网页,导航栏中的跳转页面以及物品购物车的增删查改均有实现,需要的话可私聊 .表单验证区域未添加具体JS代码,单独增加了登录验证界面,喜 ...
网页轮播图制作（html+css+js）
1.目标目的:用于自己做记录,记录制作的过程以及遇到的一些问题.内容参考来自b站的up主:黑马前端的pink老师JavaScript基础语法课程. 2.功能需求 (1)当鼠标经过轮播图,左右两边的 ...
网页学习笔记（全）Html+Css+Js+JQuery
前段笔记 (一)安装vscode 安装:插件 chinese 汉化 open-in-browser ---> 启用设置自动保存:文件 -> 自动保存 (二)认识页面结构: Emmet:? ...

网页缓慢置顶回到顶部 html、css、js

题目：

问题描述：

解决：

总结

网页缓慢置顶回到顶部 html、css、js相关推荐

最新文章

热门文章