jquery的回到顶部

最新推荐文章于 2023-06-13 10:37:33 发布

潇潇暮雨子规啼~

最新推荐文章于 2023-06-13 10:37:33 发布

阅读量106

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/qq_31706077/article/details/101075562

版权

首先要导入jquery文件

样式的编写
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			height: 3500px;
			/*渐变色*/
			background: linear-gradient(to bottom,#0f0,#00f);
		}
		.bsck-top{
		/*定在网页的某个位置,不会移动*/
			position: fixed;
			/* display: none; */
			/*设置在顶最层*/
			z-index: 9999;
			width: 80px;
			height: 80px;
			line-height: 80px;
			text-align: center;
			background-color: #2ECC71;
			/*过渡持续时间为0.8s*/
			transition: all .8s;
			right: 40px;
			bottom: 40px;
		}
		.bsck-top:hover{
			background-color: #CCCCCC;
		}
		a{
			display: block;
			color: #eee;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="back-top">
		<a href="javascript:void(0)" class="bsck-top">回到顶部</a>
	</div>
	
	<script>
		$(function(){
			//为窗体对象绑定滚动事件
			$(window).scroll(function(){
				var s = $(this).scrollTop();
				console.info(s);
				if(s > 100){
					/*淡入*/
					$('.back-top').fadeIn('slow');
				}else{
					/*淡出*/
					$('.back-top').fadeOut('slow');
				}
			})
			$('.back-top>a').on('click',function(){
				$('html,body').animate({
					scrollTop:0
				},1000)
			})
		})
	</script>
</body>

潇潇暮雨子规啼~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的回到顶部

首先要导入jquery文件样式的编写 <style type="text/css"> body{ margin: 0; padding: 0; height: 3500px; /*渐变色*/ background: linear-gradient(to bottom,#0f0,#00f); } .bsck-top{ /*定在网页的某个位...
复制链接

扫一扫