jQuery

来源：互联网发布：怎么在淘宝买东西流程编辑：程序博客网时间：2024/05/21 11:17

实现”回到顶部按钮”这个功能要满足两个要求，

1. 当浏览器下拉时按钮显示，回到顶部时按钮隐藏； 2. 点击按钮时，通过jquery的animate函数滑到顶部。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script><style type="text/css">.main_right {    width: 930px;    height: 2236px;    margin: 0 auto;    background-color: gray;}.main_right a.go_top {    display: block;    position: fixed;    bottom: 50px;    left: 50%;    margin-left: 500px;    width: 50px;    height: 50px;    background-color: blue;}.main_right a.go_top:not(.on){    display:none!important;}/* - 这句看不懂- *//* - !important - 提升指定样式规则的应用优先权。*/</style></head><body>    <div class="main_right">          <!-- 返回置顶 = {go_top} start -->          <a href="javascript:void(0);" class="go_top" id="go_top"></a>    </div></body><script type="text/javascript">    //显示按钮    window.onscroll = function(){ //元素滚动时执行     onscroll 事件在元素滚动条在滚动时触发。        var sideToolbar = $("#go_top");//定义变量        if((document.body.scrollTop||document.documentElement.scrollTop)>500){            sideToolbar.addClass("on"); //判断滚动条超过 500px 时执行显示 - 可修改 -        }else{            sideToolbar.removeClass("on"); //否则隐藏        }    }    //点击事件    $("#go_top").click(function(){        $("html,body").animate({ scrollTop: 0 }, 800); // 滑动置顶所需要的时间 - 可修改 -    });</script></html>

阅读全文

0 0