zoukankan      html  css  js  c++  java
  • 在内容长页处动态增加滚动的返回头部图标

    .前言:

    在做网页设计过程中,如果网页内容的长度不定,且当内容过长时,需要不断下拉滚动条查看新的内容。
    但是,如果我需要返回头部看原来旧的内容,又需要往上滚动,让用户感觉很不方便。因此,做一个能够根据内容长度
    动态增加返回头部图标的需求应运而生。
    2.具体实现:
    1)css文件内容:/******返回顶部*******/

    p#back-to-top{

    position:fixed;

    display:none;

    bottom:50px;

    right:210px;

    }

    p#back-to-top a{

    text-align:center;

    text-decoration:none;

    color:#979797;

    display:block;

    50px;

    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

    -moz-transition:color 1s;

    -webkit-transition:color 1s;

    -o-transition:color 1s;

    }

    p#back-to-top a:hover{

    color:#333333;

    }

    p#back-to-top a span{

    background:transparent url(/images/uptotop.png) no-repeat;

    border-radius:6px;

    display:block;

    height:50px;

    50px;

    margin-bottom:5px;

    text-align:center;

    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/

    -moz-transition:background 1s;

    -webkit-transition:background 1s;

    -o-transition:background 1s;

    }

    #back-to-top a:hover span{

    background:transparent url(/images/uptotop.png) no-repeat;

    }

    复制代码-----------------------------uptotop.png-----------------------------


    ---------------------------------------------------------------------------
    2)页面增加的js代码段(需要jquery的支持):<!-- 加载页面 -->

    <script language="javascript" type="text/javascript">

    $(document).ready(function(){

    //当滚动条的位置处于距顶部800像素以下时,跳转链接出现,否则消失

    $(window).scroll(function(){

    if ($(window).scrollTop()>800){

    $("#back-to-top").fadeIn(1500);

    }

    else

    {

    $("#back-to-top").fadeOut(1500);

    }

    });

    //当点击跳转链接后,回到页面顶部位置

    $("#back-to-top").click(function(){

    $('body,html').animate({scrollTop:0},1000);

    return false;

    });

    });

    </script>

  • 相关阅读:
    qt程序编译错误:could not exec ‘/usr/lib/x86_64-linux-gnu/qt4/bin/qmake’
    安装 yaml-cpp,MP4V2
    安装cmake 和 opencv 4.0.0
    windows系统,boost编译安装
    messageQ 消息队列
    fflush 和 fsync 的区别
    开源一个 PDF 小工具集软件【使用 PDFium 库实现】
    封装 libjpeg 库
    纯 C++ 代码实现的 INI 文件读写类
    C++11 —— 使用 thread 实现线程池
  • 原文地址:https://www.cnblogs.com/taofx/p/4139905.html
Copyright © 2011-2022 走看看