当前位置: » 首页 » CSS技术 » 【CSS菜鸟实践之旅四】实现网页回到顶部功能

【CSS菜鸟实践之旅四】实现网页回到顶部功能

如果仔细观察,可以发现在主流网站中,几乎都会有回到顶部的功能,它可以使用户较方便的返回至页面的起始位置,而避免用户手动操作滚动条。
它的实现其实比较简单,附上本人实现的简单Demo:回到顶部示例
实践总结:
1.【position: fixed】
它的作用是生成绝对定位的元素,相对于浏览器窗口进行定位的。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
示例中就是把回到顶部“按钮”固定放置于距浏览器窗口右侧30px和距浏览器窗口下方30px的右下方。
2.【border-radius: 4px
为元素添加圆角边框,是CSS3的新增属性。
关于元素圆角效果,这里再次复习和强调,比较兼容的写法为:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;

详细可以参考:CSS3圆角详解

最受欢迎

【CSS菜鸟实践之旅四】实现网页回到顶部功能:目前有2 条留言

  1. Steven Fu

    还是用jQuery一行代码的事情 这样直接返回顶部 太突兀 用户体验不好

发表评论