焚花祭秋 » WordPress,非插件實現返回頂部,底部,留言的代碼分享

WordPress,非插件實現返回頂部,底部,留言的代碼分享

作者：焚花祭秋 / 发布时间：November 2, 2011 / 分类：博客.技巧 / 1 Comment

這個對於博客瀏覽還是挺有好處的,特別是遇到大長篇的文章,不停的撥鼠標讓人手疼啊,加入這個東西,方便使用,一鍵點擊,直接奔向你想要去的地方,很是給力,實現起來也不難,下面就說下實現的代碼和方法!

首先說明參考自加文博客,多多分享,多多支持哈!

下面直接說實現的代碼和步驟,大家跟著走就OK了,無難度!

首先:在需要的位置加入代碼,一般是加載在頂部,當時這個隨你,代碼如下:

<?php if ( is_home() ||is_archive()): ?>
    <div id="roll"><div title="回到頂部" id="roll_top"></div>
<div title="轉到底部" id="fall"></div></div>
<?php else:?>
	<div id="roll"><div title="回到頂部" id="roll_top"></div>
<div title="查看評論" id="ct">
</div><div title="轉到底部" id="fall"></div></div>
	<?php endif; ?>

其次:建立加載JS文件,這個你可以自己建立獨立的JS文件也行,直接貼代碼到模板裏也行,也是隨你,代碼如下:

// 滾屏
jQuery(document).ready(function($){
$(‘#roll_top’).click(function(){$(‘html,body’).animate
({scrollTop: ’0px’}, 800);});
$(‘#ct’).click(function(){$(‘html,body’).animate({scrollTop:$
(‘#comments’).offset().top}, 800);});
$(‘#fall’).click(function(){$(‘html,body’).animate({scrollTop:$
(‘.footer’).offset().top}, 800);});
});
// context
$(document).ready(function(){
$(‘.entry_box_s ‘).hover(
function() {
$(this).find(‘.context_t’).stop(true,true).fadeIn();
},
function() {
$(this).find(‘.context_t’).stop(true,true).fadeOut();
}
);
});
// more
$(document).ready(function(){
$(‘.entry_box’).hover(
function() {
$(this).find(‘.archive_more’).stop(true,true).fadeIn();
},
function() {
$(this).find(‘.archive_more’).stop(true,true).fadeOut();
}
);
});

註意:頂部加載JS,根據自己主題修改一下代碼,主要是做滑動定位的,要和自己的主題函數命名對的上才行,切忌哦,代碼如下,對應著修改就好了!

jQuery(document).ready(function($){
$('#roll_top').click(function(){$('html,body').animate
({scrollTop: '0px'}, 800);});
$('#ct').click(function(){$('html,body').animate({scrollTop:$
('#comments').offset().top}, 800);});
$('#fall').click(function(){$('html,body').animate({scrollTop:$
('.footer').offset().top}, 800);});
});

最後:肯定是樣式定義和美化了,提供一段簡約的代碼,大家可以根據自己的喜好修改和折騰,代碼如下:

#roll_top,#fall {
position:relative;
cursor:pointer;
height:93px;
width:11px;
}
#ct {
position:relative;
cursor:pointer;
height:53px;
width:11px;
}
#roll_top {
background:url(images/roll.png) no-repeat;
}
#fall {
background:url(images/roll.png) no-repeat 0 -146px;
}
#ct {
background:url(images/roll.png) no-repeat 0 -93px;
}
#roll {
display:block;
width:15px;
margin-right:-185px;
position:fixed;
right:50%;
top:30%;
_margin-right:-219px;
_position:absolute;
_margin-top:170px;
_top:expression(eval(document.documentElement.scrollTop));
}

完了,就是這麼簡單,折騰吧,生命不息,折騰不止!

Ps:css中的_margin-right和_margin-top數值，改變圖片位置，根據實際情況修改!

Over!收工! GO GO GO !