html回到顶部效果,HTML 标签切换效果/回到顶部功能

购物网站的标签切换效果

demo

• 公告

• 资讯

• 科技

• 论坛

主要效果由CSS实现

*{

margin: 0px;

padding: 0px;

font-size: 12px;

list-style: none;

}

.tab{

width: 298px;

height: 98px;

margin: 10px;

border: 1px solid #eee;

overflow: hidden;

}

.tab-title{

height: 27px;

position: relative;

background: #f7f7f7;

}

.tab-title ul{

position: absolute;

width: 301px;

left: -1px;

}

/*设置li标签的间距与宽度*/

.tab-title li{

float: left;

width: 58px;

height: 26px;

line-height: 26px;

text-align: center;

padding: 0 1px;

border-bottom: 1px solid #eee;

overflow: hidden;

}

/*去掉下划线设置字体颜色*/

.tab-title li a:link,.tab-title li a:visited{

text-decoration: none;

color: #000;

}

/*//鼠标滑动变色效果*/

.tab-title li a:hover{

color: #f90;

font-weight: 700;

}

论坛等网站的点击后回到顶部功能(页面滑动到一半时显示按键，回到顶端时速度变慢)

top

window.onload = function () {

var topbtn = document.getElementById("btn");

var timer = null; //设置定时器

var pageheight = document.documentElement.clientHeight; //获取页面高度

window.onscroll = function(){

var backtop = document.body.scrollTop;

if (backtop >= pageheight){ //根据页面高度让决定按键是否显示

topbtn.style.display = "block";

}else {

topbtn.style.display = "none";

}

};

topbtn.onclick = function () {

timer = setInterval(function () {

var backtop = document.body.scrollTop;

var speed = backtop/5;

document.body.scrollTop = backtop-speed; //让到页面顶端时速度变慢

if(backtop==0){

clearInterval(timer);

}

},30);

}

};