第七十章 返回顶部

前面我们导航中的链接,链接到的地址是 #,那么这个 # 是什么意思呢?

# 表示的是锚点。我们前面所学的网址都是指向某个文件的,但是在一个页面中,也是分为很多部分的,我们想要对它们进行快速的定位,就可以使用锚点的方式:

index.html#footer

这就是链接到 index.html 这个文件的 #footer 这个锚点。这么写你会想到什么?CSS 里面不是用 # 表示 id 的么?对,这就是跳转到相应 id 的元素那里[1]。我们说过,在一个页面中,id 是不会重复的,所以可以定位到唯一的一个元素,没有冲突,这就十分的方便。

那如果我现在就在这个页面当中,写相对地址的时候,消去相同部分就可以把文件名也消除掉了,但是 # 必须保留哦。最后实现的效果就是在当前页面内快速的滚动到相应位置,而不是刷新页面。

那如果只写 #,后面没有内容呢?那就会直接返回页面的最顶部。诶,点题了哦!这作文可以加分了。

所以返回顶部其实就是一个地址为 # 的链接。你问我为什么导航部分的链接也都是 # ……我那不是没得写么。

好啦,怎么返回这个事情解决了,样式我们也会定义,方的圆的,各种颜色,边框阴影……想想都会写的,对吧?就不说了哦,但大家要动手做哦。

不过这个按钮一般都是浮动在右下角什么的,所以我们用固定定位 fixed 就比较合理。这个很简单,所以不演示了,对,老鼠就是懒,你来咬我呀!

当然,你也可以使用粘性定位 sticky,只是要注意兼容性。比如自己的网站,我就是任性,用的浏览器垃圾的话,那我就不考虑你的体验了,那就完全没问题。但如果是某些面向的用户十分大众的网站,你就要考虑那些使用的浏览器不怎么好,或者说不怎么懂得选择浏览器的用户了。因为你无法抛弃这些用户,而他们会把遇到的一切问题都归结为——网站辣鸡!

简单说一下用 JS 来实现类似效果的原理,你就当做闲聊,我们开阔一下视野。首先肯定是静态定位,因为不动嘛;同时监测页面滚动,当页面滚动超过指定位置,把元素设置为固定定位 fixed。滚动回来的过程正好相反。

这就 OK 了么?不对,如果转换为固定定位 fixed,那它原来的位置就消失了,后面的元素会受到影响,结果你会感觉页面蹦了一下(后面元素位置忽然发生变化)。所以我们需要为这个准备飘起来的元素套一个父元素,当它飘走了,父元素维持原来的尺寸,在原地撑住,等着儿子归来,这是多么感人的一幕,体现了……咳咳咳,这不是写作文,就不抒情了。

这个效果我们后面也可以自己实现的,嗯,所以要认真的跟着学下去哦,我们会变强的,但绝不变秃!(强势拒绝

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容