jQuery实现回到顶部

已于 2023-06-13 18:09:42 修改
阅读量682 收藏 1
点赞数
分类专栏： 入门案例 文章标签： jQuery
于 2018-07-26 15:29:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36639124/article/details/81220791
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script>
	
	// 当我们拖动窗口滚动条时,如果滚动条顶部偏移超过400,则显示火箭,否则隐藏火箭(默认情况下火箭隐藏)
	$(window).scroll(function(){
		// 获取窗口相对滚动条顶部的偏移
		var top = $(window).scrollTop();
		if(top > 400){// 当偏移量大于400,淡入火箭
			$(".rocketDv").fadeIn(500);
		} else{// 淡出火箭
			$(".rocketDv").fadeOut(500);
		}
		
	});
	
	// 给火箭添加点击事件
	$(function(){
		$(".rocketDv").click(function(){
			// 修改图片的路径为 '带喷火的火箭图'
			$(".rocketDv>img").attr("src","images/gotoTop2.png");
			// 一秒内让包裹火箭的div往上走,直到最顶部
			$(".rocketDv").stop().animate({"top":"0px"},1000,'linear',function(){
				// 火箭归原位
				$(".rocketDv").hide().css({"top":"350px"});
				// 火箭图片变回最开始的图片
				$(".rocketDv>img").attr("src","images/gotoTop1.png");
				// 窗口滚动条回到最顶部
				$(window).scrollTop(0);
			});
			
		});
	});
	

</script>

<style>
	.rocketDv{
		width: 50px;
		height: 101px;
		position: fixed;
		top: 350px;
		right: 20px;
		display: none;
	}

</style>

</head>
<body>
	<!-- 设置高度:让浏览器窗口有滚动条 -->
	<div style="height: 1500px;"></div>
	<!-- 包裹火箭的div -->
	<div class="rocketDv">
		<img src="images/gotoTop1.png"/>
	</div>
	
</body>
</html>

实现效果:

寒骁杰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 实现返回顶部功能
10-25
本文给大家带来的是使用javascript结合jQuery实现返回顶部的功能，并附上源码，送给大家，需要的童鞋直接拿走吧
jquery实现点击页面回到顶部
10-21
在网页设计中，提供“回到顶部”的功能是一个常见的优化用户...总的来说，这个简单的jQuery实现提供了用户友好的页面导航体验，尤其适用于内容丰富的长页面。希望本文能帮助读者理解和实现这一功能，感谢关注和支持！
JQuery实现回到顶部
朱登凯的专栏
05-12 1万+
当一个页面的内容比较长时，一般都在页面的右下角的固定位置有个“回到顶部”的按钮，点击后，页面的滚动条逐渐回滚到顶部，本篇来描述一个它的实现过程。 首先，需要有一个按钮<button id="btn_top" title="回到顶部"> 回到顶部 </button>然后给这个元素定位到右下角，我们使用position：fixed。下面这个按钮加一些最基本的样式#btn_top { p
jquery实现回到顶部效果
qq_48294048的博客
10-02 180
css: <style> div { width: 100%; height: 500px; margin: 10px; } button { width: 100px; height: 100px; background: rgba(0, 0, 0, 0.3); positi
jquery实现回到顶部
weixin_42461079的博客
01-06 173
jquery实现回到顶部 调用gotoTop函数，为窗口增加scroll事件，传入页面滚动的最小高度，没有传值默认600，在此传了200，当滚动条高度大于200的时候，回到顶部的div显示，否则消失。 点击回到顶部，定义一个动画，让窗口的scrollTop逐渐减至0； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
jquery实现返回顶部功能
HusKiy的博客
10-31 2284
先来看看效果，当滚动的距离超过蓝色方块的时候，就会显示返回顶部的文字，这时候点击返回顶部就会自动返回顶部 <style> body { height: 2000px; } .back { position: fixed; width: 100px; height: 50px; right: 30px; .
jQuery实现回顶部
北纬30°
10-03 615
导入CSS样式、js 在头部创建&lt;style type="text/css"&gt;&lt;/style&gt;标签，内容如下 &lt;style type="text/css"&gt; .cd-top { display: inline-block; height: 40px; width: 40px; position: fixe...
jquery实现回到顶部，悬浮窗口功能
dhyway的博客
05-09 401
以下是使用jquery实现的一些前端页面的小功能，下滑超过指定px就会出现回到顶部的按钮，还有广告窗口的出现，关闭。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"&
Jquery实现回到顶部
时光依旧
06-12 825
Jquery实现回到顶部$('document').ready(function(){ var timer = null; //获取页面可视区域的高度 var clientHeight = $(window).height(); //鼠标向下滑动 $(window).scroll(function(){ var osTop = $(docume
使用jQuery实现返回顶部
蚩尤煜的博客
04-12 494
目录前言效果图实现完整的style和body部分HTML代码 前言 最近要设计一个网页，想实现一个类似于菜鸟教程的返回顶部按钮，但找了很久都没找着合适的实现方法，最后自己结合菜鸟教程的设置和网上的其他一些设置，自己结合jQuery实现了这个功能。 希望能对你有所帮助。 效果图 点击右下角的小方块可以返回网页顶部 实现 首先设置一个贴附在网页右下角的div小块的css <style> .fixed-btn { position: fi
JQuery实现返回顶部
Marco_30的博客
02-28 327
<!DOCTYPE html> <html lang="en"> <head> <style> #back-to-top{ position:fixed;display:none; bottom:100px; right:80px;} #back-to-top a{ text-align:center; text-decoration:none; color:red; display:block; width:64px;} #back-to-
jQuery实现回到顶部按钮效果
01-28
在提供的文件列表中，`index.html`, `index2.html`, 和 `index3.html`可能是包含上述代码的不同页面示例，每个可能有不同的HTML结构，但核心的jQuery实现保持不变。`top.gif`可能是一个用于按钮的图像，`images`和`...
jQuery实现简单的回到顶部totop功能示例
11-28
本文实例讲述了jQuery实现简单的回到顶部totop功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> &lt...
jQuery实现返回顶部
02-16
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户快速地将浏览焦点移回页面顶部，特别是在长页面滚动时。本文将深入探讨如何利用jQuery这一强大的JavaScript库来实现这一功能。 首先，jQuery是...
jQuery实现动态添加和删除input框
热门推荐
有点儿文绉绉的小赖的博客
07-26 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;选项&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.8.3.js"&gt
java面向对象高级特性 ---接口案例(学校中有教师和学生两类人，而在职研究生既是教师又是学生)
有点儿文绉绉的小赖的博客
05-18 1万+
1)设计两个接口studentinterface和teacherinterface。 2)studentinterface接口包含setFee()getFee()方法，分别用于设置和获取学生的学费. 3)teacherinterface接口包含setPay()和getPay()方法，分别用于设置和获取教师的工资. 4)定义一个研究生类graduate，实现studentinterface接口和teacherinterface接口，它的成员变量有name，sex，age，fee，
java--String类操作：注册系统：验证输入的用户名、密码、确认密码是否合法
有点儿文绉绉的小赖的博客
05-21 1万+
import java.util.Scanner; /** * 注册系统：验证输入的用户名、密码、确认密码是否合法 * @author Administrator * */ public class Register1_Re { /** * 验证用户名和密码 * @param username 传进来的用户名 * @param pwd 传进来的密码 * @retur...
java--ArrayList泛型：使用ArrayList泛型添加5个学生对象， 然后遍历打印5位学生的自我介绍方法。
有点儿文绉绉的小赖的博客
05-21 1万+
import java.util.ArrayList; import java.util.List; /** * 使用ArrayList泛型添加5个学生对象，然后遍历打印5位学生的自我介绍方法。 * （需创建学生类）Student.java包含 name,age,gender属性，printer()介绍方法 * @author Administrator * */ public cla...
jquery回到顶部
最新发布
09-21
其中一种方法是在页面中添加一个返回顶部的按钮，通过点击按钮触发事件来实现回到页面顶部的效果。具体的代码如下： ```javascript $(function () { $(window).scroll(function () { if ($(this).scrollTop() > ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值