回到顶部的几种实现方法(WordPress、Typecho通用)

使用默认链接锚点

添加一个a链接,设置a链接的href属性值为"#top"即可实现


我在顶部

href指向特定的id

给页面顶部元素设置一个id值,将返回顶部a链接的href属性指向改id属性的元素





使用自定义链接锚点

在页面顶部定义一个锚点,然后将返回顶部a链接的href属性指向该锚点



我在顶部

使用简单的JavaScript脚本

设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置


我在顶部

火箭上升式返回顶部(jQuery实现)





Document




我在顶部

上面几种方式实现起来比较简单,但是效果生硬,直接从底部切换到顶部,没有一个过渡的动画。此方法能使页面动态滚动,同时将按钮换成一个箭头标志,判断页面滚动的距离,当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

退出移动版