zoukankan      html  css  js  c++  java
  • js小效果:返回顶部 scrollTop 。 滚屏:animate

    返回顶部:

    (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮)

    <div id="gotop" onclick="javascript:scroll(0,0);"><img src="images/top33x33.png"></div>
    <style type="text/css">
    #gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;height:33px;z-index:999;}
    </style>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(window).scroll(function() {//滚屏
            var scrollTop = $(document.body).scrollTop();//滚动高度
            var windowH = $(window).height();//页面高度
            if(scrollTop>windowH){
                $("#gotop").show();
            }else{
                $("#gotop").hide();
            }
        });
    });
    </script>

    屏幕滚动到某个像素处:2015-11-18

    var scrollTop = $(this).offset().top;
    $(document.body).scrollTop(scrollTop-50);

    返回顶部、返回页面顶部:  2016-4-22

    $('.sidebarnav .sbnl-gotop').click(function(){//回到顶部
        $(document.body).animate({scrollTop: '0px'}, 800);
    });

    侧导航的显示隐藏:(要求,滚屏超过100px后,显示侧导航。初始状态下不显示侧导航)  2016-4-22

    /* 侧导航 */
    $(window).scroll(function() {//滚屏
        var scrollTop = $(document.body).scrollTop();//滚动高度
        //var windowH = $(window).height();//页面高度
        if(scrollTop>100){
            $('.sidebarnav').show();
        }else{
            $('.sidebarnav').hide();
        }
    });

    ..

  • 相关阅读:
    Windows8 自制DatePicker
    Windows8 商店支付功能
    通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)
    Windows8 检测网络
    Windows8 推送通知
    Windows8&Windows Phone 做一个图片效果
    js 两种时间数字字符串格式
    使用Homebrew安装Git(Mac)
    JavaScript核心参考教程客户端JavaScript
    MVC模式浅谈
  • 原文地址:https://www.cnblogs.com/qq21270/p/4961686.html
Copyright © 2011-2022 走看看