jquery实现点击图片返回顶部

最新推荐文章于 2021-10-31 23:25:52 发布

weixin_34335458

最新推荐文章于 2021-10-31 23:25:52 发布

阅读量657

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/korabear/blog/1811751

本文介绍了一种使用jQuery实现页面滚动到一定位置时显示返回顶部按钮的方法，并通过点击该按钮使页面平滑滚动至顶部的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

jquery实现窗口滚动条下拉，显示直达顶部的图片，点击图片返回顶部.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>返回顶部</title>
	<style type="text/css">
		body {
			height: 2000px;
		}

		img {
			display: none;
		}

		.box {
			position: relative;
			height: 2000px;
		}

		div .wrap img {
			position: fixed;
			bottom: 10px;
			right: 10px;
		}
	</style>
	<script text="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
	<div class="box">
		<div class="wrap"><img src="img/gotop.png"></div>
	</div>
	<script>
		$(function(){
			// 往下拉，出现广告框	
			$(window).scroll(function(){
				var height = $(window).height();
				// alert($(window).height());
				if ($(window).scrollTop() >= height * 0.5) {
					$("img").stop().fadeIn(1000);
				} else {
					$("img").stop().fadeOut(1000);
				}
			});

			// 点击图片，图片滚动条立即回到顶端
			$("img").click(function () {
				$("html,body").stop().animate({
					scrollTop: 0
				},1500)
			});
		});
	</script>
</body>
</html>

执行效果：

往下拖动鼠标，到达一定的位置，显示图片