快速返回顶部

1.css

.backToTop {
	width: 0.84rem;
	height: 0.84rem;
	 position: fixed; 
	 right: 4%; 
	 bottom: 1.2rem; 
	display: none;
	z-index: 999;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABWCAMAAABmfUH4AAAAeFBMVEWZmZkAAAAAAAA+Pj5OTk4AAAAAAAAAAAAAAAAAAAAAAACVlZWKiopgYGBgYGCampqamppwcHCamppkZGSQkJB8fHxhYWGZmZmVlZVycnJoaGiZmZmampqYmJiXl5dtbW2SkpJlZWVRUVGDg4OSkpJzc3NtbW16enrFjjGBAAAAKHRSTlOzABizLAQUBxELDo2MszSnmZ2erGVHsJJxPqaslYN+oGo3Lk6MmjyVKGDi6AAAA5hJREFUWMPt2Wlz2jAQBuDtomOlgC8OQw0E6PX//2HXwbBTGh3GfOlM3w+ZySQ8s17JspHgSyraOk8G+xhD3lmd/EgCtf6DU7dcbW+fRx313m513JcwpNwfV7ueJvcMqonB4tTCJ2lPBcOkR6KWUF1WDQTTrC4KyY5ANZPnIyRyPDOrc1GHqjhARg7cBZdApcwtZGYrxcZQLnNdQnbKNRebQr2UmV+sj6OERQUjUxVIEVST2nUwOt1OkQ6iRq3hqayVCaGkvsGT+aboc5Skzmdqpc9QjzuYkB36v1GHRTcF7Qp0j6hGVcGkVAr1A0pqCxOzVfQn6jA5SN/nycG6NQBuF19CPO1i8QbxlLcGQObFt5vZjNVkAwS1WEA8ezZZbSGeAu0dJXVIjCybOepB0Q3VeIZomuVsyGYP0ZxRDyipY6bJanw2HxUNKF7ig3oz21+L2WwZVy94RR2uouZX7uWPOaMNvPdqA5Gs0H2gpKL/xubsK7zxzzf+pVfLWKsU9ajGImmWMO/R269ddFZpRh2eIBQp7QOVwsM5oWPUq/A0uTdR0C6h7pVn1KikKegwGRbvEAw/rkBHFvx6cZ+YgkITV3eoweIqau7hEYUqqq7QgsPQff9jcbvZBZWlYFGH7n904LEK1CmmoLJoBWut0IMJLc/zhSygjyi0/Md5aKk2EB78+ZKVAApvy3l4+AGDKHQQRqGDIIoxFGIo/EeDqPlHUAMGy9eiJaMeq9eiFXpZUCajsqDI0jcdlaVP4y4X/Z75nq7lcRLP97qu28zB52cUqT28MHtF8oieHHlEy8vEqCRfJripzevMRhl5QUulqTd1lTWhnLxKplLzlKoz0AsmX3olG0Y3aVNeei2eIZV3Rt/T6BntgPJQJe//ql5m9PSgTP5XHkn+Vx4udfsKc8uFCmpRldMvv1Ro7yiHcD19oNZITAmquQFPTym5eC3o0IBq2uSvrhcvKMdj0U25TbsC/UAJqs3UjRmjBRV12haSmIL2bZ2y2YVWJHjY5XzOlP3Ov1DN6s9nNhB/sqkDKKsGi3as2RZo7qagolqD6jTOPCk0ls1PUFHHbh+LGUA51uO4jW70NmP33JkRW/LSzijKLSDMPTxAsjrzRMJysTnHHFymzT870dYbTB3IoPFSZhwVlhCDR0ccEjKNCuv6cq/yPXiNkRO0PFRYOYmTMEi9KGQ+Ki7Dnsh8hMgzKOJ4VGCmh2hO+hO/ATQIM4ahp3diAAAAAElFTkSuQmCC);
	background-size: 0.84rem;
	background-repeat: no-repeat;
	background-position: center;
}

2.js

$(function () {
	//点击回到顶部的元素
    $(".backToTop").click(function () {
     	//以1秒的间隔返回顶部
        $('body,html').animate({scrollTop: 0}, 1000);
    });			
	//实现回到顶部元素的渐显与渐隐
    $(window).scroll(function () {
    	//判断距离,当距离较小时,隐藏,当距离较大时显示
        if ($(window).scrollTop() > 100){
        	//以1秒的间隔渐显元素
            $(".backToTop").fadeIn(1000);
        }else{
        	//以1秒的间隔渐隐元素
            $(".backToTop").fadeOut(1000);
        }
    });

})

猜你喜欢

转载自blog.csdn.net/hangGe0111/article/details/81944724
今日推荐