HTML网页返回顶部怎么做

我们浏览网页的时候，可以看到页面的底部会有一个“返回顶部”的图标按钮，点击它就回返回顶部，那么怎样实现返回顶部的效果呢？

操作方法

（01）如图，先进行网页布局，一个content的div用来存放内容，一个fixed的div用来设置返回顶部图标。

（02）然后设置content的宽度高度，这里只是举个例子，我们只要把高度设置得超出浏览器窗口高度就可以了。

（03）然后设置fixed的宽高，这里也是随意的，然后我们把它定位在浏览器的右下角。

（04）如图所示，这样我们的“返回顶部”图标就大致完成了。

（05）然后在页面中引入jQuery插件，插件版本不做要求，这里我就引入了3.2.1的版本。

（06）然后我们在jQuery入口函数里面书写代码，如图，先要获取到fixed所在的div。获取方法是$(“d”)。

（07）然后给获取到的d元素绑定一个click方法。

（08）在click方法里面书写匿名函数，然后我们就可以在匿名函数里面设置返回顶部的动画效果了。

（09）如图，返回顶部是相对整个HTML文档来说的，所以我们要获取到HTML和body元素。

（10）然后给它们设置动画效果，如图，使用animate方法，这个方法时jQuery插件里面的。

（11）然后在animate里面设置参数，第一个参数就是scrollTop的属性，我把它设置为0，这样，滚动条就会回到顶部，第二个参数是时间，表示回到顶部所需要的时间，具体时间可以自己设置。