E-mail: Foxl@hulingweb.cn
联系我们案例演示中心服务热线:15523356218座机专线:023-68168040

狐灵科技Logo

当前位置:主页 > 网站建设 > 网络建站知识 >

Html 返回顶部代码及注释说明

发表日期:2019-04-13文章编辑:Smileby陌少羽浏览次数: 标签:Html,返回,顶部,代码,及,注释,说明,最近,做了,

最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好。最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块。当然这就需要结合“返回顶部”功能来取得更好的体验了。当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高。

下面就说下简单的返回顶部效果的代码实现,附注释说明。

 

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能

方法一:用命名锚点击返回到顶部预设的id为top的元素

html代码
<a href="#top" target="_self">返回顶部</a>

方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置)

html代码
<a href="javascript:scroll(0,0)">返回顶部</a>