实现返回页面顶部功能

10.1 效果

10.2 代码

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

	//js
    document.addEventListener('scroll', function() {
     
		if(window.pageOffset >= 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.2.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>