PJBLOG文章添加返回页面顶部的Javascript特效代码,本文目的:在pjblog文章右下角添加一个"返回顶部"的按钮,实现快速返回页面顶部的效果,提高用户体验。
这里介绍两种可以实现的效果及方法。
效果一:直接快速返回页面顶部
动态模式下:
首页实现返回顶部效果,编辑class\cls_article.asp文件,搜索如下代码:

在后面添加如下代码:

博客文章现返回顶部效果,编辑class\cls_article.asp文件,搜索如下代码:

在后面添加如下代码:

静态模式下:
首页实现效果同动态方法;文章实现效果方法,编辑Template\static.html,搜索如下代码:

在后面添加如下代码:

后台-站点基本设置-初始化数据-更新所有日志到文件,并且包含日志列表缓存,即可见到效果。
效果二:滚动效果返回页面顶部(同本页面)
暂只提供静态模式修改方法,因本人不太懂asp代码,有在动态模式下研究出来的兄弟欢迎共享。
找到default.asp中包含的头文件如header.asp,在其中适当的位置插入以下javascript代码:

var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer() {
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top() {
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}
&n
bsp;
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
</script>
编辑Template\ArticleList.asp,搜索如下代码(共4处):

在后面添加如下代码:

后台-站点基本设置-初始化数据-更新所有日志到文件,并且包含日志列表缓存,即可见到效果。
其他类型网站如需使用此特效只需将上面两处js代码添加到你的html(网站内容模板)文件中即可。
此代码可以实现滚动卷屏返回页面顶部的效果,更贴近WEB2.0效果,更炫。
转载请尊重版权,出处:秋天博客 本文链接: https://www.cfresh.net/pc-tech/233