只修改了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. Swift - 高级运算符介绍

    除了基本运算符之外,Swift还支持位运算和位移运算,包括:   1,按位取反运算:操作符是 ~ 2,按位与运算:操作符是 & 3,按位或运算:操作符是 | 4,按位异或运算:操作符是 ^ 5 ...

  2. 【翻译】十大要避免的Ext JS开发方法

    原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean ...

  3. Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法

    App底部的tab标签页可以方便的把功能模块划分清楚,只需点击相应的标签页就可以展示完全独立的视图页面,同时各标签页间的视图也可以进行数据交换.   TabBarItem系统自带图标样式(System ...

  4. Nancy.Host的Web应用

    Nancy.Host实现脱离iis的Web应用 本篇将介绍如何使用Nancy.Host实现脱离iis的Web应用,在开源任务管理平台TaskManagerV2.0代码里面已经使用了Nancy.Host ...

  5. 窗体透明,但窗体上的控件不透明(简单好用)good

    1.在Delphi中,设置窗体的AlphaBlend := true;AlphaBlendValue := 0-255; AlphaBlendValue越小窗体的透明度就越高.这种方法将会使窗体和窗体 ...

  6. sql plus 抢救数据(測)

    有索引 --运行plsql脚本 DECLARE  TYPE RowIDTab ISTABLE OF ROWID INDEXBY BINARY_INTEGER;    CURSORc1 IS selec ...

  7. 例3.1 猜猜数据结构 UVa11995

    1.标题叙述性说明:点击打开链接 2.解题思路:据来推測一种可能的数据结构,备选答案有"栈,队列.优先队列".结果也可能都不是或者不确定. STL中已经有这三种数据结构了,因此直接 ...

  8. ZipHelper 压缩和解压帮助类

    ZipHelper 压缩和解压帮助类 关于本文档的说明 本文档基于ICSharpCode.SharpZipLib.dll的封装,常用的解压和压缩方法都已经涵盖在内,都是经过项目实战积累下来的 欢迎传播 ...

  9. [Word使用笔记]分类简介

    什么Vistual Studio , Eclipse , Xcode , 都弱爆了,Word比他们难多了 - -! 此分类用于记录Word的一些使用

  10. 安卓MP3播放器开发实例(1)之音乐列表界面

    学习安卓开发有一年了,想想这一年的努力,确实也收获了不少.也找到了比較如意的工作. 今天准备分享一个以前在初学阶段练习的一个项目.通过这个项目我真正的找到了开发安卓软件的感觉,从此逐渐步入安卓开发的正 ...