7-26:HTML学习#17

今日学习：JS函数，返回按钮。学习时长：3h。

 <div class="backTop"><a onclick="pageScroll()">返回顶部</a></div>
      <div class="welcome"><img src="img/0NS28V50Y{X6BJ1Y]R[7497.png"></div>
      <div class="welcomeUs">加入<br>我们</div>



.backTop{
    position: fixed;
    top: 700px;
    right: 80px;
    cursor: pointer;
    width: 4em;
    height: 22px;
    color: white;
    background-color: rgb(199, 199, 199);
    box-shadow: 2px 2px 2px rgb(204, 204, 204);
    border-radius: 5px;
    transition: 0.5s;
    user-select: none;
}
.backTop:hover{
    color: black;
}
.welcome{
    position: fixed;
    top: 620px;
    right: 90px;
    width: 3em;
    height: 3em;
    background-color: rgb(199, 199, 199);
    border-radius: 100%;
    opacity: 1;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 1px 1px 1px rgb(204, 204, 204);
}
.welcome:hover{
    opacity: 0;
}
.welcomeUs{
    position: fixed;
    top: 620px;
    right: 90px;
    width: 3em;
    height: 3em;
    background-color: rgb(199, 199, 199);
    border-radius: 100%;
    text-align: center;
    line-height: 23px;
    opacity: 0;
    cursor: pointer;
    user-select: none;
    transition: 0.5s;
}
.welcomeUs:hover{
    opacity: 1;
}
/*主题内容*/
.box3{
    width: 1200px;
    height: 2000px;
    background-color:beige;
    position: relative;
    margin: auto;
}
footer{
    background-color: azure;
    z-index: -1;
}
.end{
    width: 1200px;
    height: 200px;
    background-color: aquamarine;
    position: relative;
    margin: auto;
}


function pageScroll(){
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
        window.scrollBy(0,-10);
    //延时递归调用，模拟滚动向上效果
        scrolldelay = setTimeout('pageScroll()',1);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
        var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
        if(sTop==0) clearTimeout(scrolldelay);
    }
    //点击GAME快速返回
function Scroll(){
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
        window.scrollBy(0,-100);
    //延时递归调用，模拟滚动向上效果
        scrolldelay = setTimeout('Scroll()',10);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
        var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
        if(sTop==0) clearTimeout(scrolldelay);
    }