zoukankan      html  css  js  c++  java
  • 网页返回顶部浮动图标代码

    CSS
    <style>
    <!--
    .back-to {
        bottom: 35px;
        overflow: hidden;
        position: fixed;
        right: 10px;
        width: 110px;
        z-index: 999;
    }
    .back-to .back-top {
        background: url("http://static.wetui.com/img/page-back-top.png") no-repeat scroll 0 0 transparent;
        display: block;
        float: right;
        height: 50px;
        margin-left: 10px;
        outline: 0 none;
        text-indent: -9999em;
        width: 50px;
    }
    .back-to .back-top:hover {
        background-position: -50px 0
    }
    -->
    </style>
     
    HTML
    <div style="display:none;" class="back-to" id="toolBackTop">
    <a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
    返回顶部</a>
    </div>
     
    [先需要引入jQuery库哟!]JS
    $j(document).ready(function () {
            var bt = $j('#toolBackTop');
            var sw = $j(document.body)[0].clientWidth;
     
            var limitsw = (sw - 840) / 2 - 80;
            if (limitsw > 0){
                    limitsw = parseInt(limitsw);
                    bt.css("right",limitsw);
            }
     
            $j(window).scroll(function() {
                    var st = $j(window).scrollTop();
                    if(st > 30){
                            bt.show();
                    }else{
                            bt.hide();
                    }
            });
    });
     
    Image

     
  • 相关阅读:
    那些陌生的C++关键字
    从实现装饰者模式中思考C++指针和引用的选择
    单例模式(Singleton)
    命令模式(Command)
    抽象工厂模式(Abstract Factory)
    《Effective C++》读书摘要
    桥接模式(Bridge)
    适配器模式(Adapter)
    设计模式学习心得
    黑客常用WinAPI函数整理
  • 原文地址:https://www.cnblogs.com/svennee/p/4071834.html
Copyright © 2011-2022 走看看