只修改了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. Office 2013 正式版 下载地址 带正版验证

    万众期待的正式版Office 2013 降临---英文版/中文简体版 英文版软件下载地址: office_professional_plus_2013_x86_dvd en_office_profes ...

  2. Maven项目下 java.lang.ClassNotFoundException 常规解决的方法

    网上非常多要改动.class .project的比較麻烦有时候还不一定管用.以下的方法适合于项目用已经引用了jar.可是执行时却ClassNotFound,请用例如以下方法试试: 严重: Error ...

  3. 介绍SAP预留函数创建搜索帮助

    紧接上一节介绍的SAP预定义的出口函数F4IF_SHLP_EXIT_EXAMPLE创建搜索帮助, 该函数主要有两个部分: Changing接口的参数属性如下: SHLP:搜索帮助的基础描述,包括搜索帮 ...

  4. [Android学习笔记]枚举与int的转换

    package com.example.enumdemo; import android.app.Activity; import android.os.Bundle; import android. ...

  5. 查找MobileSafari WebKit revision number的方法

    Mobile Safari是开源的Mac Safari的iOS版本,然而iOS WebKit并不完全开源,只公开了部分的WebCore和JavaScriptCore.有时需要知道iOS Safari的 ...

  6. android中Logcat的深层理解

    Android的开发也能够归类为嵌入式设备的开发.即便不是嵌入式开发,依旧要注意对内存和处理的使用.养成一个好的习惯对自己的帮助是非常大的. 在Log的源代码中能够看到这种凝视: The order ...

  7. ThinkPhp学习02

    原文:ThinkPhp学习02 一.什么是MVC                M -Model 编写model类 对数据进行操作 V -View  编写html文件,页面呈现 C -Controll ...

  8. (三)----使用HttpClient发送HTTP请求(分别通过GET和POST方法发送数据)

    文章来源:http://www.cnblogs.com/smyhvae/p/4006009.html 一.GET和POST的对比: 在漫长的时间当中,其他的方法逐渐的退出了历史舞台,最常用的只剩下GE ...

  9. Java抓取网页数据(原来的页面+Javascript返回数据)

    转载请注明出处! 原文链接:http://blog.csdn.net/zgyulongfei/article/details/7909006 有时候因为种种原因,我们须要採集某个站点的数据,但因为不同 ...

  10. Xaml在string(串)定义常量和处理空间

    (1)基本使用方法 xaml中能够实例化各种对象,比方在ResourceDictionary中定义字符串常量: <ResourceDictionary xmlns="http://sc ...