js实现前端页面上的返回顶部按钮-最简便的方法~(JavaScript+CSS)

前端页面的返回顶部按钮,位置随着页面滚动保持在可视区,点击即返回顶部

实现方法:
JavaScript:

     <a
        class="scroll-to-top-btn"
        href="javascript:void(0);"
        onclick="document.body.scrollTop=document.documentElement.scrollTop=0"
      >
        <img src="./scroll-to-top.png" />//一张图
      </a>

CSS:(根据实际需要去调整)

.scroll-to-top-btn {
    position: fixed;
    left: 50%;
    bottom: 224px; //下边距
    margin-left: 624px; //左边距
    z-index: 10; //层级
}

页面效果:
在这里插入图片描述
快到你的页面里试试吧✨🎈如有帮助记得点个赞再走喔😯~~😁

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值