wordpress最简单的添加返回顶部功能

Author : lovecicy

很多网站都有返回顶部的按钮,以方便在任何位置都可以直接点击按钮返回页面顶端, 虽然键盘的home键就可以实现这个功能,但是还是不如按钮方便。

在网上寻了一下教程,发现无非是放一张图片,加一段js和css,使用jquery的话可以更好的实现动画效果。

当然,还有更简单的办法,下面就来介绍一下:

在WordPress的后台,选择外观->小工具,选择“文本”,拖拽到SideBar,在文本编辑器中将标题留空,在内容编辑器中输入一段html代码,我用的是

<a href=”#” id=”toTop” alt=””>^回到页首</a>

可以修改id和标签内的文字, 但是href=”#” 这段是关键。

之后,在外观->编辑中选择编辑style.css,在最后加上一段

#toTop{

width: 15px;
padding: 3px;
border: 1px solid #DBD5C5;
border-radius: 3px;
background: #F1EAD8;
position: fixed;
right: 0;
bottom: 50px;
text-align: center;

}

其中的toTop就是你在文本编辑器中输入的<a>的id,其中的样式可以按照个人喜好修改。

保存css修改,好了,大功告成,简单吧。虽然能起到返回顶端的作用,但是不会随着滚动条的位置隐藏或显示,也没有动画效果,所以如果你想要更好的效果,还是百度一下吧。

这是我的返回顶端按钮的效果:

standard

Have your say