返回顶部的几种方案 博客分类： 前端积累常见特效教学笔录笔记随笔JS 前端积累常见特效教学笔录笔记随笔JS

【前言】

    本文简单说下常见的几种返回顶部的方案

 

【主体】

    （1）锚点

    使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后我们在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。

    缺点：URL后面会添加锚点名

<!-- 定义一个名称为top的锚点链接 -->
<a name="top"></a>

<!-- 这里是网页主体内容，此处省略 -->


<!-- 返回页面顶部top锚点的链接 -->
<a href="#top">返回顶部</a>

    关于锚点方式的区别和详情，项看文章 浅谈锚点跳转优先级

 

    （2）使用js函数scrollTo()

    利用JavaScript为我们提供的函数scrollTo(x, y)来实现返回到页面顶部的功能。scrollTo函数可以滚动到指定坐标(x, y)处的内容。将坐标设定为(0, 0)即可起到返回顶部的作用。

<a href="javascript:scrollTo(0,0);">返回顶部</a>

 

    （3）使用js操作DOM样式

    还可以使用js将body或html等元素的scrollTop属性设置为0，即可滚动到页面的顶部。一般使用jQuery来实现上述代码

// 以下三种方式均可实现返回页面顶部
$(window).scrollTop(0);

$('body').scrollTop(0);

$('html').scrollTop(0);

 

 

 

 

 

 

 

 

.