如何实现做一个简单的返回顶部效果按钮

如何实现做一个简单的返回顶部效果按钮

开发工具与关键技术:DW—jquery
作者:Mr_恺
撰写时间:2019.01.17

我们是不是在浏览网页的时候,可以看到网页右下都会有一个“返回顶部”的按钮,
点击它就回能回到顶部,那么怎样实现返回顶部的效果呢?

先HTML布局,用一个content的div存内容,a标签做返回顶部的图标
如何实现做一个简单的返回顶部效果按钮_第1张图片
然后设置一下css样式,把返回图标定位
如何实现做一个简单的返回顶部效果按钮_第2张图片

  1. 这是直接粗鲁的方法就是在,a标签那个跳转路径为空或者放#号,其实就是刷新一下网页,网页一闪,滚动条一样回到了上面
    在这里插入图片描述

    在这里插入图片描述
  2. 这是带动画效果的滚动条:
    先把jquery插件,插件版本不做要求,我这引进jquery-3.2.1.js插件
    如何实现做一个简单的返回顶部效果按钮_第3张图片
    设置一个方法:
    scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)
    如何实现做一个简单的返回顶部效果按钮_第4张图片
    这个方法:当滚动条小于500px时,那个返回顶部图标是隐藏的,当滚动条大于500px时,那个返回顶部图标是显示的 如何实现做一个简单的返回顶部效果按钮_第5张图片如何实现做一个简单的返回顶部效果按钮_第6张图片
    给a标签绑定点击事件,返回顶部是相对于整个HTML与body文档,所以要获得HTML和body元素,然后设置动画效果使用插件里的animate方法,第一个参数scrollTop设置为0,这样滚轮条就会回到顶部,第二个参数是表示回到顶部的所需的时间,具体时间自己设置
    如何实现做一个简单的返回顶部效果按钮_第7张图片

你可能感兴趣的:(前端)