javascript实现优雅的返回顶部效果，不是简易粗暴直接回到开头的那种...

最新推荐文章于 2023-02-27 09:53:12 发布
最新推荐文章于 2023-02-27 09:53:12 发布
阅读量187 收藏 1
点赞数
文章标签： js javascript html web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38902844/article/details/106165342
版权

效果图

效果图

说明

  • html/css/js代码分别保存在index.html/main.css/main.js 文件中，三个文件保存在同一文件夹下即可

源代码

HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回顶部</title>
    <!--引入css文件-->
    <link rel="stylesheet" href="main.css">
    
</head>
<body>
    <!-- 返回顶部按钮 -->
    <div id="backTop">
        <span>回到<br>顶部</span>
    </div>

    <div id="main_page">
        
        <h1>开头</h1>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <h2>结尾</h2>
    </div>
	<!--引入js文件-->
    <script src="main.js"></script>
</body>
</html>
CSS 代码

body{
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}
#main_page{
    width: 60%;
    margin: 10px auto;
    background-color: #fff;
    border: 1px dashed #ccc;
    text-align: center;
}

#backTop{
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid rgb(226, 225, 225);
    position: fixed;
    right: 10%;
    bottom: 10%;
    font-size: 30px;
    color: #757575;
    cursor: pointer;
    text-align: center;
    /* 一开始不需要出现 */
    /* opacity: 0; */
    transition: all 0.3s linear;
    /* line-height: 100px; */
}
#backTop:hover{
    color: rgb(255,103,0);
}
JS代码

// 监听滚动事件
var st=0;
// 获取返回顶部按钮
var backTop = document.getElementById("backTop");
// 声明一个定时器
var timer = 0;
window.onscroll=function(){
    // 获取滚动的距离
    // document.documentElement 相当于HTML元素
    // document.body.scrollTop 是为了兼容IE浏览器
    st = document.documentElement.scrollTop || document.body.scrollTop;
    // 控制 backTop 的显示隐藏
    if(st>500){
        backTop.style.opacity = "1";
    }else{
        backTop.style.opacity = "0";
    }
}

// 实现点击返回顶部的功能
backTop.onclick = function(){
    
    // 清除上一次的定时器
    clearInterval(timer);

    timer=setInterval(function(){
        // console.log(st);
        // 每次滚动的距离是不同的，会越来越慢
        var speed = st/10;
        // 对“速度”向上取整，而不是四舍五入，否则可能最后减不到0
        speed = Math.ceil(speed);
        // 到头以后，也要清除定时器，否则无法正常向下滚动
        if(st<=0){
            clearInterval(timer);
        }
        document.documentElement.scrollTop = st-speed;
    },30);
}
qq_38902844
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现返回顶部操作
m0_56683232的博客
04-03 193
话不多说先看效果： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
js实现回到顶部效果
Della_UI的博客
10-29 517
html：<ul> //撑页面 <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <a href="javascript:;" id="btn"><p>回到顶部</p></a> //回到顶部按钮
弹性返回顶部JS代码
07-20
js返回顶部代码，兼容ie6，很好很实用的一款返回顶部的js代码
jQuery实现一个优雅的返回顶部
Lengwenin的博客
09-27 207
前言 最近在完成Freewind主题的V1.1版本的小升级，加了返回顶部的功能，索性就把实现整理成一篇博文发布出来供大家学习，效果如下： 主要功能 在鼠标滚动超过一半屏幕高度时显示回顶部按钮，其它情况隐藏 点击按钮回不是立刻回到顶部，有一个滚动的动画 设计思路 设计出按钮位置和样式，并且将按钮不置为透明 在鼠标发生滚动事件时做判断，如果滚动位置大于屏幕高度的一半，则显示回顶部按钮 为按钮添加点击事件，点击时使用jQuery的动画组件做一个回顶部的动画 代码实现 第三方库 jquery <
js回到顶部代码
WuqibuHuan的博客
12-09 350
** html ** <div class="index"> <ul> <li> <img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""> </li> <li> <img src="https://www.jq22.com/img/cs/500x500-1.png"
javascript返回页面顶部_javaScript基础
weixin_39882623的博客
11-29 134
JavaScript(简称“JS”) 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格(摘自百度百科)1.在网页中添加javaScript的方法嵌入使用在网页的任何位置都可以嵌入j...
基于JS实现回到页面顶部的五种写法(从实现到增强)
在下魔王ii的博客
04-27 213
基于JS实现回到页面顶部的五种写法(从实现到增强) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
阿里前端高频vue面试题（边面边更）
bb_xiaxia1998的博客
10-14 5222
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
阿里前端常考vue面试题汇总
最新发布
bb_xiaxia1998的博客
02-27 288
题目分析回答范例实现我们可以像下面这样简单实现和，从而辨别两者不同 如何在组件中批量使用Vuex的getter属性 使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中 Vue组件之间通信方式有哪些 组件传参的各种方式组件通信常用方式有以下几种根据组件之间关系讨论组件通信最为清晰有效1. 父子组件通信父组件模板: 子组件模板: 回调函数（callBack）父传子：将父组件里定义的作为传入子组件 子组件向父组件通信父组件模板: 子组件模板: 2. provide
腾讯前端常考vue面试题整理
bb_xiaxia1998的博客
10-25 159
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。
原js笔记
Pwsifeng的博客
01-10 2526
s原生JS笔记 电话：17339853876（微信同号） 二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作 人机交互 前后端交互 3、HTML、CSS、JS的作用和关系 一个网页由三部分组成：HTML、CSS、Javascript HTML： 结构（静态） [外链图片转存失败,源站可能有防盗链
手写React的Fiber架构，深入理解其原理
dennis_jiang的博客
06-23 1566
熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化的部分，而不重新渲染整个页面，大大提高渲染效率。到了16.x，React更是使用了一个被称为Fiber的架构，提升了用户体验，同时还引入了hooks等特性。那隐藏在React背后的原理是怎样的呢，Fiber和hooks又是怎么实现的呢？本文会从jsx入手，手写一个简易版的React，从而深入理解React的原理。 本文主要实
php实现轮播图实例,JS实现图片轮播的实例
weixin_42701905的博客
03-21 285
本文主要为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)，代码参考了一位已经写好了图片轮播功能的(再次表示感谢)，但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。效果如下：图片轮播body,p,ul,li,a,img{margin: 0;padding: 0;}ul,li{list-style: none;}a{text-decoration: none;}#wrapper{po...
mysql-异常
01-04 229
1.Subquery returns more than 1 row 返回的集合应该是一条才能用，但你返回了多条。 转载于:https://www.cnblogs.com/hwaggLee/p/5099123.html
css 回到首页按钮,js+css实现回到顶部按钮（back to top）
weixin_29447473的博客
08-04 2525
本文实例介绍了js+css实现回到顶部按钮的方法，分享给大家供大家参考，具体内容如下效果htmlcssp#back-to-top{position:fixed;bottom:100px;right:80px;}p#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:30px;/...
JavaScript返回上一页的三种方法
热门推荐
Hubert Biyo的博客
05-24 5万+
JavaScript返回上一页代码区别： window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 window.location.go(-1); //刷新上一页 window.history.back();location.reload();//强行刷新(返回上一页刷新页面)
物流订单轨迹效果实现
chenyu0519的博客
02-22 3118
转载于:https://my.oschina.net/xilanzhikong/blog/618767
很好用的返回顶部代码
前端和PHP学习
11-04 757
需要调用Jquery文件哦 JS代码如下： jQuery(document).ready(function ($) { $('.rtTop h4 img').hover(function () { $(this).stop().animate({ "top": "-43px" }, 200) }, function () { ...
HTML页面中返回顶部的几种实现
终南有客-吾生也有涯，而知也无涯。
12-24 1万+
  HTML页面中返回顶部的几种实现 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料. 第一种:引用外部jQuery 新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果. <!doctype html> <html lang="en"> &lt...
利用turn.js实现JavaScript图书翻页效果详解及源码
本篇文章详细介绍了如何利用JavaScript和turn.js技术来实现图书翻页效果。turn.js是一个用于创建交互式PDF阅读器的JavaScript库，特别适用于电子书和文档的在线查看。作者针对初学者，首先强调了turn.js虽然提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值