非常小巧的一键到达顶部的代码

简介: 非常小巧的一键到达顶部的代码

一、效果展示:

 

二、代码分享

<div style='height:50px; line-height:50px; text-align:center; color: #b2b2b2;'>
    <a href="https://blog.csdn.net/qq_27471405/article/details/78105999">
        <img style="position:fixed;right:0; bottom:160px; z-index:99999; width:40px !
important;height:40px !important;" src="http://pic.kuaizhan.com/g2/M00/71/9D/wKjmqlbSmoyAYCswAAEVnPTZD8E8141345" />
    <a style="z-index:99999;" id="goTop" href="#">
         <img style="position:fixed;right:0; bottom:100px; z-index:99999; width:40px !
important;height:40px!important;" src="http://pic.kuaizhan.com/g2/M00/71/80/CgpQVFbSmpCAdtMEAAEO6ESdBwI3920068" />
</div>
相关文章
|
9月前
|
开发者
QT基础【6-跨界面发送信号】
QT基础【6-跨界面发送信号】
|
5月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
132 1
前端一键回到顶部案例
|
9月前
【最全最详细】使用publiccms实现动态可维护的导航菜单栏
【最全最详细】使用publiccms实现动态可维护的导航菜单栏
|
9月前
|
移动开发 小程序 前端开发
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
|
前端开发 API
Electron 渲染进程之间互相通信 创建窗口时触发
Electron 渲染进程之间互相通信 创建窗口时触发
如何实现“点击回到顶部”的功能?
如何实现“点击回到顶部”的功能?
205 0
|
JavaScript
获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部
获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部
|
人工智能 JavaScript 前端开发
小程序实现页面多级来回切换支持滑动和点击操作
想留住粉丝,就必须安排演示: [审核中…]然后开摆!!!!首先通过swiper创建一个简单的多tab页面 通过触发pagechange1方法中的事件对currentIndex来进行赋值,又通过currentIndex的改变使前端wxml对应更改,这个部分对滑动和点击的操作都一样,无非就是使currentIndex对应到各自的位置,通过数字来决定位置 这个部分完整代码如下: wxml wxss js 上一步完成后,下级页面再加一个滑动页面,当内切换结束后,在做切换就是父级的切换操作 在“内容1”的vie
291 0
小程序实现页面多级来回切换支持滑动和点击操作
|
前端开发 JavaScript
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。
433 0
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
|
前端开发 测试技术 API
【测试平台开发】二十、完成编辑页发送接口请求功能
【测试平台开发】二十、完成编辑页发送接口请求功能
【测试平台开发】二十、完成编辑页发送接口请求功能