返回顶部

一.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;
				text-align: center;
				line-height: 46px;
				color: #fff;
				z-index: 100;
			}

			#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();
					//(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>