鸣宇的记事本鸣宇的记事本
  • 注册
  • 登录
  • 首页
  • 文字
  • 图片
  • 音乐
  • 视频
  • 软件
  • 福利
  • 笔记
  • 作品
首页 › 笔记 › 简易的返回到顶部前端代码

简易的返回到顶部前端代码

Lv.1
鸣宇MeatY 站长
1年前笔记
337 0 0

HTML部分

<a class="to-top">↑</a>

CSS部分

.to-top {
	display: none;
	color: #fff;
	background-color: #282828;
	display: inline-block;
	height: 40px;
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 2px;
	z-index: 101;
	opacity: 0.4;
	cursor: pointer;
    position: fixed;
    right: 38px;
    bottom: 38px;
}

.to-top:hover {
	color: #fff;
	opacity: 1;
}

JS部分

//返回顶部
var sc = $(".to-top");
sc.bind("click", function() {
	$('html,body').animate({
		'scrollTop': 0
	}, 400);
});
$(window).scroll(function() {
	var scrtop = document.body.scrollTop;
	if(scrtop >= 100) {
		sc.show();
	} else {
		sc.fadeOut();
	}
});
0
本文系作者 @鸣宇MeatY 站长 原创发布在 鸣宇的记事本。未经许可,禁止转载。
【Windows】爱奇艺、优酷、腾讯格式转MP4工具
上一篇
如何用ajax给php传输数据
下一篇
评论 (0)

请登录以参与评论。

现在登录
    热门
    暂时没有文章!
    热评
    暂时没有文章!
    随机
    简易的返回到顶部前端代码
    1年前
    你是在独立思考,还是在被洗脑?
    2年前
    为什么“小丑”的来历如此神秘?
    2年前
    【H5】《漫说襄阳 – 初入襄阳》
    2年前
    【视频】三亚 – 旅游混剪
    1年前
    相关文章
    windows下安装ThinkPHP6.0框架教程
    如何用ajax给php传输数据
    鸣宇的记事本

    有起有落有悲有喜

    底部导航
    文字 图片 音乐 视频 软件 福利 笔记 作品
    友情链接
    青春博客
    Copyright © 2018-2021 鸣宇的记事本. Designed by nicetheme. 鄂ICP备17011511号-1
    • 首页
    • 文字
    • 图片
    • 音乐
    • 视频
    • 软件
    • 福利
    • 笔记
    • 作品
    热门搜索
    • VLOG
    • 辞职
    • 优酷
    • 腾讯
    • 爱奇艺
    • 视频
    • 转码
    • MP4
    • 建设银行
    • 话费
    • 白嫖
    • 福利
    • 查企业
    • 查老板
    • 企信通
    • 小程序
    • 开课啦
    • 消防
    Lv.1
    鸣宇MeatY 站长
    一个胖子
    35 文章
    0 评论
    15 喜欢
    • 0
    • 0
    • Top