html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结

最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料.

第一种:引用外部jQuery

新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果.

doc

.arrow{

border: 9px solid transparent;

border-bottom-color: #3DA0DB;

width: 0px;

height: 0px;

top:0px

}

.stick{

width: 8px;

height: 14px;

border-radius: 1px;

background-color: #3DA0DB;

top:15px;

}

#back_top div{

position: absolute;

margin: auto;

right: 0px;

left: 0px;

}

#back_top{

background-color: #dddddd;

height: 38px;

width: 38px;

border-radius: 3px;

display: block;

cursor: pointer;

position: fixed;

right: 50px;

bottom: 100px;

display: none;

}

$(function(){

for(var i =0 ;i <100;i++){

$("#article").append("

xxxxxxxxxx

")

}

})

$(function(){

$(window).scroll(function(){ //只要窗口滚动,就触发下面代码

var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

if( scrollt >200 ){ //判断滚动后高度超过200px,就显示

$("#back_top").fadeIn(400); //淡入

}else{

$("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

}

});

$("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

$("html,body").animate({scrollTop:"0px"},200);

});

});

第二种:使用css及特殊图标进行设置

全代码打造简洁美观回到顶部按钮,同上,将代码复制进HTML文件中,打开即可看到效果.

doc

#back_top{

display:block;

width:60px;

height:60px;

position:fixed;

bottom:50px;

right:40px;

border-radius:10px 10px 10px 10px;

text-decoration:none;

display:none;

background-color:#999999;

}

#back_top span{

display:block;

width:60px;

color:#dddddd;

font-size:40px;

text-align:center;

margin-top:4px;

}

#back_top span:hover{

color:#cccccc;

}

⌆