只修改了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. 积累的VC编程小技巧之按钮

    1.资源种创建的控件,对其属性的动态控制: 在对话框类的头文件里创建所要改变属性的控件的对象,如要改变一个Button(其ID为IDC_MyButton)的属性,则需创建Cbutton的对象m_but ...

  2. Qt调用Delphi编写的COM组件

    这个问题捣鼓了两天,现在终于解决了,做个笔记分享给大家,以免走弯路 起初,我的想法是在DLL中写一个interface并从函数中导出这个interface,像这样的代码 ICom1 = interfa ...

  3. 使用elk+redis搭建nginx日志分析平台(转)

    logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢?首先,架构方面,nginx是有日志文件的,它的每个请求的状态等都有日志文件进行记录.其次,需要有个队列,re ...

  4. IDFA的值什么时候会发生改变

    在何种情况下 , 应用的IDFA值会发生改变? 近期工作中须要获得一个能够唯一地标示每个不同应用的ID,之前的苹果UDID已经不让使用了. 那么我们须要使用新的IDFA来引用.可是在某些情况下这个ID ...

  5. poj3468 A Simple Problem with Integers(线段树模板 功能:区间增减,区间求和)

    转载请注明出处:http://blog.csdn.net/u012860063 Description You have N integers, A1, A2, ... , AN. You need ...

  6. Codeforce 143B - Help Kingdom of Far Far Away 2

    B. Help Kingdom of Far Far Away 2 time limit per test 2 seconds memory limit per test 256 megabytes ...

  7. VSTO 为Office已有右键菜单添加自己的菜单项(word,Excel)

    原文:VSTO 为Office已有右键菜单添加自己的菜单项(word,Excel) private void AddRightMenu()         {            Microsoft ...

  8. BZOJ 刷题记录 PART 6

    [BZOJ2709]水的二分加验证.可是好像被读入萎到了... [BZOJ3229]强大的算法见此.被机房的一堆大神"推荐".于是被坑了...写了一个下午... [BZOJ3631 ...

  9. java中线程中的相关知识点

    (1)守护线程必须在线程start前设置(2)守护线程在所有用户线程结束后,也会终止(3)由于(2)所有守护线程不能执行一些读写操作,原因:如果守护线程在执行读写操作时,如果用户线程结束了,守护线程的 ...

  10. 智能生活 “视”不可挡——首届TCL杯HTML5智能电视开发大赛等你来挑战

    http://www.csdn.net/article/2014-06-04/2820063-TCL-Smart-TV-Innovation-Competation