制作固定浏览器右下角的返回顶部

 时间:2026-02-15 09:43:39

1、使用sublime text打开网页文件。

给a标签一个text-decoration: none;样式去掉下划线。

制作固定浏览器右下角的返回顶部

2、在body内写一个div,赋予一个class叫rnav。

里面写一个<a href="#" class="t">返回<br />顶部</a>

当然,这里只是例子,根据实际情况修改。

制作固定浏览器右下角的返回顶部

3、关键点,给rnav设置样式。

position: fixed;

right: 50px;

bottom: 60px;

这里就是上面所说的,相对浏览器窗口绝对定位,同时要赋予right和bottom,也就是该div距离浏览器右侧为50px;距离浏览器下端60px。

制作固定浏览器右下角的返回顶部

4、然后给里面的返回顶部(class为t的a标签)赋予样式。

由于这里用的是a标签,因此要使用display: block;将a标签转为块级元素,当然这里不一定要用a标签,活用其他样式或js也可以使其他标签达到一样的效果。

制作固定浏览器右下角的返回顶部

5、到这里,打开网页,就能看到返回顶部按钮已经定位于浏览器窗口的距离右侧50px、距离下端60px处的地方了。点击该按钮,即返回页面顶部。

制作固定浏览器右下角的返回顶部

制作固定浏览器右下角的返回顶部

6、---------------------------------------

这里再简单介绍一下如何动态滑上顶部。

在网页的根目录新建一个名为js的文件夹,然后在jQuery官网下载jquery-3.2.1.min.js放进该文件夹。

制作固定浏览器右下角的返回顶部

7、在<head></head>里加上以下一句。(不知为何这句写不进来,可能是百度的保护机制)

制作固定浏览器右下角的返回顶部

8、在body下面粘贴以下代码:

$(document).ready(function(){

    $("a.t").click(function(){

    $("body").animate({scrollTop:0})

    });

});

这里指的是当点击class为t的a标签时,动态返回网页顶部。

粘贴代码在head里和body下面的区别,请另行百度。

制作固定浏览器右下角的返回顶部

  • html站点如何设置
  • 用记事本编写简单html网页入门:[2]列表
  • 网页制作教程-文本对齐方式:[1]
  • html网页可以用记事本制作吗,怎么制作?
  • php之cookie的使用-统计访问次数
  • 热门搜索
    少先队手抄报 手抄报模版 感恩手抄报内容 防溺水手抄报资料 放飞梦想手抄报 绿色家园手抄报 植树节手抄报内容50字 行为规范手抄报 卫生与健康手抄报 抗疫手抄报