首页 > 计算机应用 > PJBLOG(网站)添加滚动返回顶部Javascript特效代码

PJBLOG(网站)添加滚动返回顶部Javascript特效代码

      PJBLOG文章添加返回页面顶部的Javascript特效代码,本文目的:在pjblog文章右下角添加一个"返回顶部"的按钮,实现快速返回页面顶部的效果,提高用户体验。
      这里介绍两种可以实现的效果及方法。
      效果一:直接快速返回页面顶部

       动态模式下:
       首页实现返回顶部效果,编辑class\cls_article.asp文件,搜索如下代码:

复制内容到剪贴板程序代码程序代码
<%=log_ViewArr(12,0)%> | 引用: <%=log_ViewArr(13,0)%> | 查看次数: <%=log_ViewArr(4,0)%>

       在后面添加如下代码:

复制内容到剪贴板程序代码程序代码
|  <a href="javascript:scroll(0,0)">返回顶部</a>

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

复制内容到剪贴板程序代码程序代码
<%=log_ViewArr(12,0)%> | 引用: <%=log_ViewArr(13,0)%> | 查看次数: <%=log_ViewArr(4,0)%>

       在后面添加如下代码:

复制内容到剪贴板程序代码程序代码
|  <a href="javascript:scroll(0,0)">返回顶部</a>

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

复制内容到剪贴板程序代码程序代码
引用: <$log_QuoteNums$></a> | 查看次数: <span id="countNum">-</span>

       在后面添加如下代码:

复制内容到剪贴板程序代码程序代码
|  <a href="javascript:scroll(0,0)">返回顶部</a>

       后台-站点基本设置-初始化数据-更新所有日志到文件,并且包含日志列表缓存,即可见到效果。

      效果二:滚动效果返回页面顶部(同本页面)
      暂只提供静态模式修改方法,因本人不太懂asp代码,有在动态模式下研究出来的兄弟欢迎共享。
      找到default.asp中包含的头文件如header.asp,在其中适当的位置插入以下javascript代码:

复制内容到剪贴板程序代码程序代码
<script language="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处):

复制内容到剪贴板程序代码程序代码
<$log_viewC$>

      在后面添加如下代码:      

复制内容到剪贴板程序代码程序代码
| <a href="javascript:void(0)" onclick="goto_top()">返回顶部</a>

       后台-站点基本设置-初始化数据-更新所有日志到文件,并且包含日志列表缓存,即可见到效果。
       其他类型网站如需使用此特效只需将上面两处js代码添加到你的html(网站内容模板)文件中即可。

       此代码可以实现滚动卷屏返回页面顶部的效果,更贴近WEB2.0效果,更炫。

转载请尊重版权,出处:秋天博客
本文链接: https://www.cfresh.net/pc-tech/233

  1. 还没有评论
评论提交中, 请稍候...

留言



注意: 您给他人的评论回复将通过邮件通知到对方。

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks