返回顶部

一.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;
}