超链接中的锚点详解,各大网页中的回顶部按钮,url中的hash #

博客介绍了网页中锚点里 # 的含义,# 右边字符是网页位置标识符。以“回顶部”按钮为例,说明通过设置锚点 hash 值实现回顶功能,如在页面顶部 div 加 id,在合适位置定位按钮并设置 href,点击可回顶,地址栏会出现对应 hash。

锚点中 # 的含义

#代表网页中的一个位置,#右边的字符就是该位置的标识符。

我们经常看可以看到大部分网页都有“回顶部”的按钮,其实就是通过锚点设置hash值来做的。

设置方法:

  • step1: 在页面顶部的div加一个id=“top”,例如:
<div id="top">顶部</div>
  • step2: 在合适的位置定位一个回顶部的按钮,设置href="#top",例如:
<a href="#top" id="ret-top">回顶部</a>

我这里简单的设置了a元素的样式:
让它固定定位在浏览器的右下方,距离底部100px

.return-top{
         position:fixed;/*设置固定定位,之后也可以设置宽高*/
        right: 0;
        bottom:100px;
        width: 60px;
        height: 20px;
        color: #000;
        line-height: 20px;
        text-align: center;
        background-color: pink;
        text-decoration: none;
    }

在顶部div,与底部固定定位的超链接之间多加些内容,或者加<br>,使页面出现垂直滚动条,可以明显看出效果,点击超链接,就可以回顶了,这就是锚点的强大作用。
点击链接之后,我们可以看到地址栏html的后面多了个“#top”
如图:
锚点地址栏

如果对您有用,请点赞鼓励我一下下~ ^_^

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清颖~

您的鼓励让我们一起进步,加油!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值