js和css带滑动效果的回到顶部

最新推荐文章于 2023-05-07 20:44:41 发布

QSWQSWQSWQSWQSW

最新推荐文章于 2023-05-07 20:44:41 发布

阅读量184

点赞数

分类专栏： js css 文章标签： js和css带滑动效果的回到顶部

本文链接：https://blog.csdn.net/qq_43209114/article/details/102506105

版权

js 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

css

36 篇文章 1 订阅

订阅专栏

HTML：

<p id="back-to-top">
	    <a href="#top">
	        <span>
	            <img src="__IMG__/top-icon.png" alt="">
	        </span>
	    </a>
	</p>

CSS：

/* 回到顶部 */
#back-to-top{
    position:fixed;
    display:none;
    bottom:50px;
    right:80px;
	z-index: 99;
}
#back-to-top a{
    text-align:center;
    text-decoration:none;
    display:block;
    width:50px;
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
    -moz-transition:color 1s;
    -webkit-transition:color 1s;
    -o-transition:color 1s;
}
#back-to-top a span{
    background:transparent url(../../img/top-icon.png) no-repeat -25px -290px;
    border-radius:6px;
    display:block;
    height:50px;
    width:50px;
    margin-bottom:5px;
    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition:background 1s;
    -webkit-transition:background 1s;
    -o-transition:background 1s;
}
#back-to-top a span img{
    width: 100%;
    height: 100%;
}

JS：

$(function(){
		//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
		$(function () {
			$(window).scroll(function(){
				if ($(window).scrollTop()>100){
					$("#back-to-top").fadeIn(800);
				}
				else
				{
					$("#back-to-top").fadeOut(800);
				}
			});

			//当点击跳转链接后，回到页面顶部位置
			$("#back-to-top").click(function(){
				//$('body,html').animate({scrollTop:0},1000);
		if ($('html').scrollTop()) {
				$('html').animate({ scrollTop: 0 }, 800);
				return false;
			}
			$('body').animate({ scrollTop: 0 }, 800);
				return false;            
		});       
	});    
});