只修改了2个地方:

1,返回的速度-->改成了慢慢回去。(原来是一闪而返回)

2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。(原来是向下滚动500px后才显示)


注意:JS务必要写在 Html之后;

HTML:

<div id="d-top" style="display:none;">
<a id="d-top-a" href="#" title="回到顶部">
<img src="http://static.blog.csdn.net/images/top.png" alt="TOP" /></a>
</div>

Javascript代码

<script type="text/javascript">

    $(function(){
        var d_top=$('#d-top');
        document.onscroll=function(){
            var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
           

if(scrTop>500){

            if(scrTop>0){
                d_top.show();
            }else{
                d_top.hide();
            }
        }
        $('#d-top-a').click(function(){

              $("html,body").animate({scrollTop: 0},500);
            

//scrollTo(0,0);

this.blur();

            return false;
        });
    });
</script>


CSS样式


354 #d-top {
355     position: fixed;
357     float: right;
358     z-index: 10;
359     right: 10px;
360     bottom: 40px;
361 }
362 #d-top img {
363     width: 42px;
364     opacity: 0.3;
365 }
366 img {
367     border: medium none;
368 }

仿CSDN Blog返回页面顶部功能的更多相关文章

  1. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  2. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

  3. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  4. 代码: 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  5. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  6. 解决点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. (转)解决点击a标签返回页面顶部的问题

    本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...

  8. 解决点击空<a>标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jquery返回页面顶部

    1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始 ...

随机推荐

  1. 猿取向的规划设计模式 ——GoF《设计模式》阅读摘要(零)

    这个话题是很奇怪,设计模式是引导程序的设计不是模仿什么软件?呃.我的意思是,这是 面"对象"相对的设计模式. 我曾见过有人写<给妻子解释设计模式>,这样的把计算机中的思 ...

  2. Codeforces 39E What Has Dirichlet Got to Do with That? 游戏+内存搜索

    主题链接:点击打开链接 意甲冠军: 特定 a一箱 b球 不变n (球和箱子都不尽相同,样的物品) 设 way = 把b个球放到a个箱子中的方法数, 若way >= n则游戏结束 有2个人玩游戏. ...

  3. net析构函数对垃圾回收的影响

    net析构函数对垃圾回收的影响 之前忘了说了 代码都是在Release模式下运行的,现在补充上. 这里说析构函数,其实并不准确,应该叫Finalize函数,Finalize函数形式上和c++的析构函数 ...

  4. Sql Server中COUNT(字段名)跟COUNT(*)的特殊不同点

    今天有个需求,有2张表: 1.一个“搜索记录”表search,一个“搜索后下载记录”表down 2.映射关系:每一个下载记录对应一条搜索记录,                           第个 ...

  5. Suse 创建NFS共享目录

    Suse 创建NFS共享目录 服务端的配置: 1.编辑nfs服务的配置文件 /software/suse11 *(rw,sync,no_root_squash,no_all_squash) 凝视: / ...

  6. dsplib使用备忘

    1. 到TI官网下载与自己的芯片对应的dsplib库 2. 在工程属性里添加dsplib的头文件路径,lib库路径 3. 在源文件中包含dsplib头文件,如果是在.cpp文件里调用,包含头文件时要用 ...

  7. c#Lamdba表达式与托付

    介绍: "Lambda表达式"(lambda expression)是一个匿名函数,在C#3.0中引入了lambda表达式,它是对匿名函数的一种简化,能够包括表达式和语句,而且可用 ...

  8. 程序猿的量化交易之路(29)--Cointrader之Tick实体(16)

    转载需注明出处:http://blog.csdn.net/minimicall,http://cloudtrade.top Tick:什么是Tick,在交易平台中很常见,事实上就 单笔交易时某仅仅证券 ...

  9. 我经历的IT公司面试及离职感受(转)

    毕业后几年一直待在广州,觉得这是一个比较生活化及务实的城市,其互联网公司和相应的投融资环境都不如北深上活跃,大大小小的面试也有几十个,有点规模的公司应该都面试过了,面试一般会见到主力技术人员,技术主管 ...

  10. Codeforces Round #296 (Div. 2) A B C D

    A:模拟辗转相除法时记录答案 B:3种情况:能降低2,能降低1.不能降低分别考虑清楚 C:利用一个set和一个multiset,把行列分开考虑.利用set自带的排序和查询.每次把对应的块拿出来分成两块 ...