zoukankan      html  css  js  c++  java
  • jquery右下角返回顶部

    实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置。要先引用jquery.min.js

    <script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

    html:

    <div id="back-to-top" style="display:none"><br /><br /><br /></div>

    css:

      #back-to-top{
           width: 25px;position:fixed;bottom:20px;right:20px;border:solid 1px #ccc;cursor:pointer;text-align: center;color: red;
            _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
            }

    js:

    jQuery(function ($) {    
            //当滚动条的位置处于距顶部20像素以下时,跳转链接出现,否则消失    
                $(window).scroll(function(){    
                    if (jQuery(window).scrollTop()>20){    
                        jQuery("#back-to-top").fadeIn(1000);    
                    }    
                    else    
                    {    
                        jQuery("#back-to-top").fadeOut(1000);    
                    }    
                });    
        
                //当点击跳转链接后,回到页面顶部位置    
        
                jQuery("#back-to-top").click(function(){    
                    jQuery('body,html').animate({scrollTop:0},1000);    
                    return false;    
                });    
        }); 
  • 相关阅读:
    JavaScript中的String对象
    JavaScript中String对象处理HTML标记中文本的方法
    JavaScript中的Array对象
    JavaScript对象基础知识
    开机后显示显示‘无信号’
    JavsScript的基本特点
    ASP.NET中默认的一级目录
    MVC每层的职责
    PHP sql注入漏洞修复(数字型)
    python self的含义
  • 原文地址:https://www.cnblogs.com/zhuyefengying/p/5796265.html
Copyright © 2011-2022 走看看