HTML网页返回顶部怎么做
我们浏览网页的时候，可以看到页面的底部会有一个“返回顶部”的图标按钮，点击它就回返回顶部，那么怎样实现返回顶部的效果呢？
操作方法
- 01
如图，先进行网页布局，一个content的div用来存放内容，一个fixed的div用来设置返回顶部图标。
- 02
然后设置content的宽度高度，这里只是举个例子，我们只要把高度设置得超出浏览器窗口高度就可以了。
- 03
然后设置fixed的宽高，这里也是随意的，然后我们把它定位在浏览器的右下角。
- 04
如图所示，这样我们的“返回顶部”图标就大致完成了。
- 05
然后在页面中引入jQuery插件，插件版本不做要求，这里我就引入了3.2.1的版本。
- 06
然后我们在jQuery入口函数里面书写代码，如图，先要获取到fixed所在的div。获取方法是$(“.fixed”)。
- 07
然后给获取到的.fixed元素绑定一个click方法。
- 08
在click方法里面书写匿名函数，然后我们就可以在匿名函数里面设置返回顶部的动画效果了。
- 09
如图，返回顶部是相对整个HTML文档来说的，所以我们要获取到HTML和body元素。
- 10
然后给它们设置动画效果，如图，使用animate方法，这个方法时jQuery插件里面的。
- 11
然后在animate里面设置参数，第一个参数就是scrollTop的属性，我把它设置为0，这样，滚动条就会回到顶部，第二个参数是时间，表示回到顶部所需要的时间，具体时间可以自己设置。
赞 (0)