我们专注于搜索引擎优化!
从零开始学习SEO,上SEO指南网!

运用代码或插件实现网页返回顶部功能

回到顶部是网站设计中需要考虑到的功能,该功能对用户体验有所提升。

 

本文总结三种方法来实现这一功能。

HTML页面锚点实现

第一步:定义一个锚链接,HTML元素有name属性,如:

<div name=”top”></div>

第二步:将链接指向锚位置,里面的“id”即为上面定义的“top”,如:

返回顶部

WordPress插件实现

WordPress有很多实现返回顶部功能的插件,这里推荐两款:

Dynamic “To Top”和

Go To Top

需要可以下载使用

jQuery实现

这种方法可以实现博客回到顶部、底部和查看评论的按钮功能,比较推荐。具体实现方法如下:

步骤一,添加PHP + HTML代码,将下面代码添加到 footer.php 或 header.php

<?php if (!is_singular()) { ?>

<?php if (!is_singular()) { ?>

<div id=”shangxia”>

<div id=”shang”></div><div id=”xia”></div>

</div>

<?php } else { ?>

<div id=”shangxia”>

<div id=”shang”></div><div id=”comt”></div><div id=”xia”></div>

</div>

<?php } ?>

步骤二,添加css代码,其中的图片素材可以自己ps一个

/*右靠模式*/

#shangxia{

position:fixed;top:45%;right:50%;

display:block;margin-right:-540px;

z-index:999;

}

/*左靠模式===使用时请删掉下边一句的注释*/

/*#shangxia{

position:fixed;top:45%;left:50%;

display:block;margin-left:-540px;

z-index:999;

}*/

/*以下勿动*/

#shang,#comt,#xia{

background:url(你的图片路径) no-repeat;

position:relative;cursor:pointer;

height:25px;width:29px;margin:10px 0 0;

}

#comt{background-position:left -30px;height:32px;}

#xia{background-position:left -68px;}

#comt:hover{background-position:right -30px;}

#shang:hover{background-position:right 0;}

#xia:hover{background-position:right -68px ;}

步骤三,添加jQery代码

jQuery(document).ready(function($) {

$body = (window.opera) ? (document.compatMode == “CSS1Compat” ? $(“html”) : $(“body”)) : $(“html,body”);

$(“#shang”).mouseover(function() {

up()

}).mouseout(function() {

clearTimeout(fq)

}).click(function() {

$body.animate({

scrollTop: 0

},

400)

});

$(“#xia”).mouseover(function() {

dn()

}).mouseout(function() {

clearTimeout(fq)

}).click(function() {

$body.animate({

scrollTop: $(document).height()

},

400)

});

$(“#comt”).click(function() {

$body.animate({

scrollTop: $(“#comments”).offset().top

},

400)

});

});

function up() {

$wd = $(window);

$wd.scrollTop($wd.scrollTop() – 1);

fq = setTimeout(“up()”, 50)

};

function dn() {

$wd = $(window);

$wd.scrollTop($wd.scrollTop() + 1);

fq = setTimeout(“dn()”, 50)

};

分享到:更多 ()