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

 时间: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的使用-统计访问次数
  • 热门搜索
    土豆炖牛肉的做法 香蕉的做法大全 南瓜饼的做法大全 罗宋汤的家庭做法 朋友用英语怎么说 川贝炖雪梨的做法 桦怎么读 糍粑辣椒的做法 油茶面的做法 茄子做法