html返回顶部的按钮,javascript中返回顶部按钮的实现

本文介绍了如何使用JavaScript和CSS为网站实现一个响应式的返回顶部功能,当页面滚动超过一定距离时,按钮会显示并随着滚动而向下移动,提供便捷的导航。通过scroll事件监听和定时器实现动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

炫酷的返回顶部功能

js核心代码

window.onscroll = function(){

var t = document.documentElement.scrollTop || document.body.scrollTop;

var top_div = document.getElementById( "go" );

if( t >= 300 ) {

top_div.style.display = "block";

} else {

top_div.style.display = "none";

}

}

var ptt=20;

function pageScroll() {

document.getElementById('flypig').style.display='block';

window.scrollBy(0,-10); //每次上升10px

if(document.body.scrollTop==0) {

document.getElementById('flypig').style.marginBottom=ptt+'px';

ptt=ptt+10;

}

scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次

if(ptt>=1000){

ptt=0;

document.getElementById('flypig').style.marginBottom=20+'px';

document.getElementById('flypig').style.display='none';

clearTimeout(scrolldelay);

}

//pageScroll ends

}

html

返回顶部按钮的实现

body{

margin:0px;

}

#flypig{

display: none;

float: left;

position: fixed;

bottom: 20px;

margin-left: 75%;

cursor: pointer;

margin-bottom: 20px;

}

#go{

display: block;

float: left;

position: fixed;

bottom: 10px;

margin-left: 75%;

cursor: pointer;

}

window.onscroll = function(){

var t = document.documentElement.scrollTop || document.body.scrollTop;

var top_div = document.getElementById( "go" );

if( t >= 300 ) {

top_div.style.display = "block";

} else {

top_div.style.display = "none";

}

}

var ptt=20;

function pageScroll() {

document.getElementById('flypig').style.display='block';

window.scrollBy(0,-10); //每次上升10px

if(document.body.scrollTop==0) {

document.getElementById('flypig').style.marginBottom=ptt+'px';

ptt=ptt+10;

}

scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次

if(ptt>=1000){

ptt=0;

document.getElementById('flypig').style.marginBottom=20+'px';

document.getElementById('flypig').style.display='none';

clearTimeout(scrolldelay);

}

//pageScroll ends

}

请往下滑

flypig.gif

返回顶部

以上所述就是本文的全部内容了,希望大家能够喜欢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值