网页返回顶部功能实现

一、效果图：

二、准备工作：

jquery-3.6.0.min.js下载（链接如下）

Download jQuery | jQuery

如图，右键选择Download the compressed....，点击将链接另存为：

保存在你想要的路径下：

三、代码：

强调一点：

（这种写法是为了帮助纯小白同学，有一定基础的朋友可直接换为相对路径）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>测试</title><!-- src处填写你刚下载好了的jquery-3.6.0.min.js文件路径 --><script type="text/javascript" src="file:\\\你的jquery-3.6.0.min.js存放地址\jquery-3.6.0.min.js"></script><style>#box {position: fixed;bottom:30px;right: 30px;}#back_to_top{border:1px solid #888;}.text{height: 3000px;width: 200px;}</style>
</head>
<body>
<!-- 此处可将button换做好看的图标，但id需保持一致 -->
<div id="box" title="我是按钮"><button id="back_to_top">返回顶部</button></div><!-- 此处用于填充页面，以展示效果 -->
<div class="text"></div><script type="text/javascript">var backButton=$('#back_to_top');function backToTop() {$('html,body').animate({scrollTop: 0}, 500);  //这里的500用于调整滚动条回滚速度 ，例如还可改为：1000,700等}backButton.on('click', backToTop);$(window).on('scroll', function () {if ($(window).scrollTop() > ($(window).height()))backButton.fadeIn();elsebackButton.fadeOut();});$(window).trigger('scroll');
</script>
</body>
</html>

好了，大功告成！最后可将相应代码移植到项目中为网页添加上这个功能。

网页返回顶部功能实现相关推荐

前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
HTML 返回顶部功能
HTML 最简单实现返回顶部功能 1.添加一个超链接,然后给其href="#top",则可以实现返回顶部可以和img标签结合使用实现功能. 2.给body标签设置id,添加超链接 ...
Bilibili返回顶部功能实现
Bilibili返回顶部功能实现文章目录 Bilibili返回顶部功能实现实现原理 1. 图 2. 实现代码最近学着开发网站,学校又是实训前端,也就多练练. 一开始是看水无月打牌注意到的,挺有趣 ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
js原生实现过渡效果的返回顶部功能实例
问题描述适用范围:所有前端界面,返回顶部按钮兼容:ie 9 以上以下是实现功能的代码: <div style="position: fixed; width: 40px; hei ...
一段简单的网页返回顶部和返回底部代码（html+css+jquery）
最近用到了返回顶部和底部功能,找了找,查了查,改了改,最终实现效果大概这样子. 以下是相关代码: html部分: <div id="backtotop" class=&quo ...
js实现返回顶部功能的解决方案
<span style="font-size:14px"><p id="back-to-top"><a href="#t ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

网页返回顶部功能实现

一、效果图：

二、准备工作：

三、代码：

网页返回顶部功能实现相关推荐

最新文章

热门文章