如何制作网页中回到顶部的悬浮按钮

- 日理万妓 2022-06-10 12:54 659阅读 0赞

html代码如下：

<div class="top"> <span title="Top" id="topArrow"></span> </div>

css：（添加一定的美化效果）

.top{ width: 50px; height: 100px; background-color: rgba(0,0,255,0.5); border-radius: 10px; position: fixed; right: 100px; bottom: 40%; } .top #topArrow{ width: 30px; height: 30px; border-top: 2px solid #fff;//利用border和rotate绘制向上的箭头 border-left: 2px solid #fff; display: inline-block; transform: translate(9px,35px) rotate(45deg); cursor: pointer; z-index: 1000;//避免被其他div遮盖 } .top #topArrow:hover{ border-width: 4px; }

js：

1）jQuery

$("#topArrow").click(function(){ $(document).scrollTop(0); })

2）DOM

var topArrow=document.getElementById('topArrow'); topArrow.οnclick=function(){ document.scrollTop = document.body.scrollTop =0; }

也可以通过scrollTop将页面移动到固定元素的位置，实现如下：

<img id="img1" src="public/images/bg.jpg"> <img id="img2" src="public/images/bg2.jpg"> <img id="img3" src="public/images/bg.jpg"> <div class="top"> <span title="Top" id="topArrow"></span> </div>

js代码：

var topArrow=document.getElementById('topArrow'); var img2=document.getElementById('img2'); topArrow.οnclick=function(){ /*document.scrollTop = document.body.scrollTop =0;*/ var h=img2.offsetTop; document.body.scrollTop=h; }

这里，同样点击箭头可以将页面跳转到第二张图片的位置，但是实际应用中一般将h设置小一点，如h-200，从而让跳转效果更明显。

![Center][]

[Center]: /images/20220610/9d00e450225b464db162a63dd8830022.png

发表评论取消回复

表情：

评论列表（有 0 条评论，659人围观）

还没有评论，来说两句吧...

相关阅读

相关网页常用片段-回到顶部

1、html <div id="totop"></div> 2、css totop { width: 51px;

我不是女神ヾ/ 2023年08月17日 15:47/ 0 赞/ 54 阅读

相关 vue点击按钮回到顶部事件

<template> <div id="app"> <router-view /> <img src="

柔情只为你懂/ 2022年12月12日 15:29/ 0 赞/ 198 阅读

相关 html返回顶部按钮图片,goToTop（回到顶部）按钮的制作

//GoTop mg12 GoTop = function() \{ this.config = \{ pageWidth : 960,//页面宽度 nodeId :

Love The Way You Lie/ 2022年10月06日 08:58/ 0 赞/ 203 阅读

相关回到顶部button按钮js特效

[下载地址][Link 1] 回到顶部button按钮js特效，自动显示/隐藏按钮的网页。单击此按钮将顺利滚动网页顶部使用requestAnimationFrame()方法。

快来打我*/ 2022年09月16日 04:50/ 0 赞/ 276 阅读

相关 WZSZF飞鸽传书如何实现网页悬浮按钮

原文：[WZSZF飞鸽传书如何实现网页悬浮按钮][WZSZF_] [WZSZF飞鸽传书][WZSZF] 如何实现网页悬浮按钮，这里给大家总结一下。因为代码里注释

谁借莪１个温暖的怀抱￠/ 2022年08月23日 13:49/ 0 赞/ 159 阅读

相关如何制作网页中回到顶部的悬浮按钮

html代码如下： <div class="top"> <span title="Top" id="topArrow"></span> </div> css：（添加

- 日理万妓/ 2022年06月10日 12:54/ 0 赞/ 660 阅读

相关回到顶部

[html元素固定定位fixed][html_fixed] 元素固定定位，比如：固定在右上角或者是在左下角，主流浏览器下，使用fixed就能实现，但是IE6不支持fixe

╰半夏微凉°/ 2022年06月02日 04:56/ 0 赞/ 283 阅读

相关快速回到顶部按钮

相信大部分做网页开发的都需要这个快速回到顶部按钮的功能吧，那么接下来我给出我觉得很简单的解决方法。直接给出demo： html页面： 1.<head></he

我不是女神ヾ/ 2022年05月27日 23:49/ 0 赞/ 408 阅读

相关回到顶部

<template> <div class=""> <div class="flexd"> <d

港控/mmm°/ 2021年12月19日 16:51/ 0 赞/ 379 阅读

相关如何制作网页的顶部和底部？

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

喜欢ヅ旅行/ 2021年12月16日 08:17/ 0 赞/ 300 阅读