返回頂部

一.CSS實現返回頂部

實現思路

設置一個div並設置id屬性，通過絕對定位定位在頂部；給回到頂部按鈕設置錨鏈接

使用css中scroll-behavior: smooth;為錨鏈接設置平滑移動的效果， 哪個容器需要滾動則加上

實現代碼

1.html

			<div id="backTop">
				<a href="#backTop" class="backTop">
					top
				</a>
			</div>

2.css

* {
				padding: 0px;
				margin: 0px;
				list-style: none;
				text-decoration: none;
			}

			body,
			html {
			/* 哪個容器需要滾動則加上 */
				scroll-behavior: smooth;

			}

			.backTop {
				width: 50px;
				height: 50px;
				background-color: #FAEBD7;
				position: fixed;
				bottom: 50px;
				right: 50px;
				text-align: center;
				line-height: 50px;
			}

			#backTop {
				position: absolute;
				top: 0px;
				z-index: 100;
			}

3.如圖

二.js實現返回頂部

實現思路

1.創建backTop函數.minHeight表示與頂部的最小高度

2.實現點擊回到頂部。

• 通過動畫animate（）添加過渡效果
• 通過scrollTop: '0px'實現返回頂部

3.實現按鈕漸隱，漸顯

(1).無傳參時最小高度默認設置為600px
(2).設置隱藏 獲取window設置scorll事件
(3).獲取窗口的滾動條的垂直滾動距離
(4).當距離小於minHeight時使按鈕隱藏，大於minHeight時使按鈕顯示

使用到的方法:
$(window) 獲取瀏覽器窗口;scroll(）滾動事件 ;scrollTop（)獲取窗口的滾動條的垂直滾動距離

實現代碼

1.html

			<div id="backTop">
				<i class="fa fa-chevron-up" aria-hidden="true"></i>
			</div>

2.css

			* {
				margin: 0px;
				padding: 0px;
				text-decoration: none;
				list-style: none;
			}

			#backTop {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: #d1c2d3;
				position: fixed;
				bottom: 50px;
				right: 50px;
                                display: flex;//flex布局設置子元素居中
				justify-content: center;
				align-items: center;
				color: #fff;
				z-index: 100;
                                display:none;//默認為隱藏。
                                opcity:0;//頁面加載時沒有鼠標滑動事件  設置為透明
			}

			#backTop:hover {
				cursor: pointer;
			}

			#backTop i {
				display: inline-block
			}

3.js

		$(function() {
			//1創建backTop函數，minHeight表示與頂部的最小高度
			var backTop = function(minHeight) {
				// 1.實現點擊回到頂部 通過動畫
				$('#backTop').click(function() {
					$('html,body').animate({
						scrollTop: '0px'
					}, 100);
				})

				// 2.無傳參時最小高度默認設置為600px
				minHeight ? minHeight = minHeight : minHeight = 600;
				// 3。設置隱藏   獲取window設置scorll事件
						$(window).scroll(function() {
					// （1獲取窗口的滾動條的垂直滾動距離
					var d = $(window).scrollTop();
                                          //使opcity=1 防止頁面加載時顯示
                                        if(d>minHeight{
                                            $('#backTop').css('opacity','1');
                                        }
					//(2)當距離小於minHeight時使按鈕隱藏，大於minHeight時使按鈕顯示
					 (d < minHeight)?($('#backTop').fadeOut(300)):               ($('#backTop').fadeIn(300));
				})

			}
			// 調用函數
			backTop();


		})

如圖

也可以用這種方法：設置scrollTo(x,y)中的x和y的坐標值來滾動到頁面的具體位置

<div><a href="javascript:window.scrollTo(0,0)">返回頂部</a></div>

三.svg實現

1.html

    <div id="back-top" class="hid">
    <div class="back_top_content">
      <div class="back_top_system">
        <div class="svg_0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
            <title>回到頂部</title>
            <rect width="48" height="48" rx="24" ry="24" fill="rgb(216 216 216)"></rect>
            <path d="M31.71,26.3l-7-7a1,1,0,0,0-1.4,0l-7,7a1,1,0,0,0,1.4,1.4L24,21.39l6.31,6.31a1,1,0,0,0,1.4-1.4Z"
              fill="#fff" fill-rule="evenodd"></path>
          </svg></div>
      </div>
    </div>
  </div>

2.CSS

/* 返回頂部*/
#back-top {
    position: fixed;
    z-index: 200;
    opacity: 1;
    transition: bottom .3s ease;
    width: 66px;
    height: 70px;
    right: 21px;
    bottom: 47px;
    box-sizing: border-box;
}

#back-top.hid {
    opacity: 0;
}

#back-top .back_top_content {
    position: absolute;
    left: 50%;
    margin-left: -24px;
    bottom: calc(50% - 7px);
    margin-bottom: -24px;
    transition: bottom .3s ease;
}

#back-top:hover .back_top_content {
    bottom: 50%
}

.back_top_content .svg_0 {
    width: 48px;
    height: 48px;
}

.back_top_content svg {
    cursor: pointer;
}