使用JavaScript和jQuery分别实现返回页面顶部功能

10.1 效果

10.2 要点分析

• 需要用到页面滚动事件scroll 因为是页面滚动，所以事件源是document
• 滚动到某个位置，就是判断页面被卷去的上部值
• 页面被卷去的头部：可以通过 window.pageYOffset获得 (如果是页面被卷曲的左侧 window.pageXOfffset)
• 注意，元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset

10.3 代码

10.3.1 页面滚动到某位置返回顶部图标出现/消失

	//js
    document.addEventListener('scroll', function() {
		if(window.pageYOffset >= 500) {   //若页面滚动大于500px 图标显示 否则 图标隐藏
			returnTop.style.display = 'block';
		}else{
			returnTop.style.display = 'none';
		}
	})

	//jQuery
	$(window).scroll(function() {
		if ($(document).scrollTop() >= 500) {  //若页面滚动大于500px 图标显示 否则 图标隐藏
			$(".returnTop").show();
		}else{
			$(".returnTop").hide();
		}
	})

10.3.2 点击图标返回顶部

//js
	returnTop.addEventListener('click', function() {  
    	clearInterval(returnTop.timer);  //停止上一个timer定时器
		returnTop.timer = setInterval(function() {  //开始下一个定时器
			var t = window.pageYOffset;   
			if(t > 0){    //使页面能缓慢滚回顶部
				t = window.pageYOffset - 100;
				scroll(0, t);
			}else{
				clearInterval(returnTop.timer);
			}
        }, 10);
    })
    
//jQuery
    $(".returnTop").on("click", function() {
        $("body, html").stop().animate({  //使用动画方法，在1000ms内滚回页面顶部
            scrollTop: 0
         }, 1000);
     })

10.2.3 html和css

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            height: 2000px;
            background-color: darksalmon;
        }
        
        .returnTop {
            display: none;
            position: fixed;
            bottom: 150px;
            right: 30px;
            width: 50px;
            height: 50px;
            border: 1px solid #333;
            border-radius: 8px;
            background: url('10.返回顶部/返回顶部.png') no-repeat center center;
            background-size: 80%;
            cursor: pointer;
        }
        
        .one {
            height: 600px;
            border: #333 2px solid;
        }
    </style>
    <div class="one"></div>
    <div class="returnTop"></div>