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);

}

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值