导航:首页 > 编程语言 > js点击页面滚动到顶部

js点击页面滚动到顶部

 发布时间：2023-08-23 14:47:21

① 求助:如果使用js\jq 控制一个div 当滚动到页面顶部的时候固定在顶部，离开可继续滚动

1、新建html文档。

② js要怎么实现回到顶部

回到顶部按钮的实现基本思想很简单，就是修改页面的scrollTop，难点就是去计算scrollTop。
实现回到顶部按钮，需要考虑几个细节：
1. 回到顶部的速度计算
2. 定时器需要关闭，不关闭会导致不停的执行回到顶部的事件
3. 回到顶部事件未结束，用户进行滚动页面，应该关闭定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#btn1{
position: fixed;
bottom: 0;
right: 0;
}
</style>
<script>
window.onload = function(){
var oBtn=document.getElementById('btn1');
//用处，避免当按钮触发页面回到顶部时页面滚动这个过程未结束，用户此时人为滚动时页面不会准确响应用户
var bSys = true;
var timer = null;
window.onscroll = function(){
//当认为滚动页面，关闭定时器
if(!bSys){
clearInterval(timer);
}
bSys = false;
}
oBtn.onclick = function()
{
//每30ms执行一次 scrollTop+iSpeed
timer = setInterval(function(){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//算速度 除以的数值越大，速度越慢
var iSpeed=Math.floor(0-scrollTop/5);
if(scrollTop == 0){
//不关闭定时器，会导致第一次回到顶部之后，导致不能在响应用户的滚动，不定的触发回到顶部，by三人行慕课
clearInterval(timer);
}
//当按钮启动页面滚动，设置为true
bSys=true;
document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
}, 30);
}
}
</script>
</head>
<body style='height:2000px;'>
<input type="button" id="btn1" value="回到顶部" />
</body>
</html>

③ JS或者jquery怎么设置滚动条回到顶部

在很多网来站，为了增强自用户体验，我们会看到回到顶部的按钮，不用手动拖拽滚动条就能回到顶部，非常方便。下面就介绍用jquery实现的滚动到顶部的代码
$(function(){
//点击id为go_top的元素时网页回到顶部
$("#go_top").click(function(){
$(’html,body’).animate({scrollTop:0},1000);//回到顶端
return false;
});
});
当然我们也可以返回某个元素的位置,将以上代码写成：
$(’html,body’).animate({scrollTop:$("foot").offset().top}, 1000);//定位到该位置

④ js效果页面往上滚

可以根据滚动条y方向的值来设定第一城图片的top值;
绑定 onscroll事件 ,当滚动轮滚动的时候去获取滚动轮相对于y方向的值(top值),将第一层的top值设定成和滚动的top值相等就可以了,第一层别忘记加 position:absolute;

⑤ html css JS 怎么设计点击回顶部效果

js代码：

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

html代码：

<aonclick="pageScroll()"class="return-top"></a>

⑥ 点击网页底部的top按钮直接回到网页顶部,怎么做用js怎么表达

看你是否需要到顶部的动画效果，如果不需要动画效果而是直接回到网页顶部，那么回根本不需要去使用JS。
如：在页答面的最顶端设置锚点 <a name="top"></a>
然后在回到顶部的top按钮加连接 <a href="#top">top</a> 就可以了

当然JS也能实现，主要是给scrolltop赋值为0，从而回到页面顶部。

阅读全文

与js点击页面滚动到顶部相关的资料

热点内容
鸿蒙系统如何显示大文件 浏览：484
文件解压后可以删掉哪些 浏览：357
怎么清除c盘垃圾文件 浏览：720
js都要掌握哪些内容 浏览：906
四角号码字典有哪几个版本 浏览：869
数据库入侵dede 浏览：700
日本用什么app听歌 浏览：562
cmd新建空文件 浏览：481
广联达app在哪里找 浏览：125
javaudp网络编程 浏览：263
如何快速统计文件大小 浏览：395
dnf90版本奶爸寂静9加点 浏览：506
5s升级ios811好吗 浏览：773
苹果6s手机忘记解锁密码怎么办 浏览：223
哪里的数控编程培训学校好 浏览：495
小程序怎么登陆 浏览：957
防统方系统数据库配置文件 浏览：67
网页登录mysql数据库设计 浏览：519
怎么把电脑桌面文件移动放在d盘 浏览：734
mif文件生成器 浏览：473

友情链接