只修改了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. OPPO通过AWS节约大量成本提供海外服务

    关于OPPO OPPO最早被人熟知是在以MP3和MP4为代表的影音市场.转型进入手机市场后,OPPO获得了更大发展机遇,近几年更是成为发展速度最快的国产品牌之中的一个.早在2010年前就開始了海外市场 ...

  2. android Activity切换动画效果

    为Activity设置左右进出的效果,能够通过在Mainfest.xml文件里设置主题的方式来实现.还能够使用java代码. 一.设置样式 先看看实现动画的样式: <style name=&qu ...

  3. win7+Powerpoint2007下设置演讲者视图,两步搞定

    步骤1: 步骤2: 这样,你就可以对着ppt的备注讲解了,且用户看不到你的备注以及你的电脑桌面.cool!

  4. android 请求网络 和 httpclient的使用上传下载

    访问网络最主要的也就是 http协议了. http协议很简单,但是很重要. 直接上代码了,里面都是1个代码块 代码块的,用哪一部分直接拷出去用就好了. 1.访问网络用 get 和 post  自己组拼 ...

  5. Substrings 第37届ACM/ICPC 杭州赛区现场赛C题(hdu 4455)

    http://acm.hdu.edu.cn/showproblem.php?pid=4455 https://icpcarchive.ecs.baylor.edu/index.php?option=c ...

  6. Qml 写的弹出层控件(13篇博客)

    QML弹出窗口组件,灯箱效果.动画效果,可拖拽 核心思路:一个mask层,一个最顶层,都用rectangle,禁止事件穿透 使用 Popup { id: popup width: 200; heigh ...

  7. 判断Webbrowser是否加载完成

    var Form1: TForm1; glpDisp: IDispatch = nil; implementation {$R *.dfm} procedure TForm1.EmbeddedWB1D ...

  8. Android菜鸟的成长笔记(14)—— Android中的状态保存探究(上)

    原文:[置顶] Android菜鸟的成长笔记(14)—— Android中的状态保存探究(上) 我们在用手机的时候可能会发现,即使应用被放到后台再返回到前台数据依然保留(比如说我们正在玩游戏,突然电话 ...

  9. 参加2013中国软件开发者大会(SDCC)会,听软件开发趋势

    1.SDCC        盛大召开的会议,既然参加了,就写篇博客记一下. 2.蒋公子     首先向大会主席台走来的是csdn老大...... 额,好像不是走过来的.蒋涛采用了个特殊的上台方式呢~ ...

  10. java学习笔记06--正则表达式

    java学习笔记06--正则表达式 正则表达式可以方便的对数据进行匹配,可以执行更加复杂的字符串验证.拆分.替换等操作. 例如:现在要去判断一个字符串是否由数字组成,则可以有以下的两种做法 不使用正则 ...