关于页面

关于页面的一些东西一直没有弄清楚,今天来个大扫除。

1.目录式的跳转 换一个高大上的叫法是锚点跳转。 实现锚点跳转有两种方式,一种是a标签和name属性,还有一种就是使用标签的id属性。百度百科就是使用的a标签的name属性实现锚点跳转的。 例如: 但是总感觉有点不搭调啊,“#”在css里不就是id选择器吗,所以我还是喜欢id属性实现跳转。

一些问题:如果我们页面有个固定的header,如果跳转位置正好是窗口顶端,那不就被header挡住了吗,怎么让a标签被点击时跳转的锚点的位置往下偏移一点哪,挺简单,加上下面样式就好了。 .target{ padding-top: 50px; margin-top: -50px; }

2.监听页面滚动 都监听了,肯定要用到js了,上面说了单击一个标签跳转到指定位置,那如果反过来,当我们滚动到指定位置就出发一些效果怎么实现?这种应用其实不少,比如滚动到底部自动加载或者淘宝商品详情。 jQuery提供了一个监听页面滚动的函数:.scroll(),我们一般都是监听整个页面的滚动 $(window.document).scroll(function (){}); 计算到顶部或底部距离的函数$(selector).scrollTop();$(selector).scrollLefft(); 有了这两个函数我们就能设完成各种页面滚动效果了。

我们扩展一下,当跳转的不是标签,变成网页目录,那我们如何实现,这就提到了单页web,和多页web,多页自然是在有文件目录来跳转,但是作为前端我们有强大的js可以控制页面的生成,遵循前后端分离的观念,还是把页面都交给前端来控制的好,另外单页应用不用刷新,这对关注用户体验的前端来讲很重要,也帮助后端减少了服务器压力。但是单页应用也肯定存在的一些缺点,比如SEO、前进后退等问题,但是相信随着时代的发展未来一定会有所改变的。

那又要问了,单页如何跳转哪,这就需要一些强大的js框架了,比如交给Angular的路由模块来管理。

Licensed under CC BY-NC-SA 4.0
❤️
Built with Hugo
Theme Stack designed by Jimmy