js返回顶部_如何用js实现网站返回顶部的浮动效果

1. 怎样用js写返回顶部的滑动效果

实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。
要点一：document.documentElement.clientWidth || document.body.clientWidth；获得可视区的宽度。后面是兼容chrome，前面是兼容其它浏览器。
要点二：oTop.style.left = screenw - oTop.offsetWidth +"px"; 当页面加载时，让元素的位置位于页面最右边，用可视区的宽度减去元素本身的宽度。
要点三：oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px"; 当页面滚动时，元素的Y坐标位置等于可视区的高度减去元素本身的高度，加上滚动距离。
要点四：document.documentElement.scrollTop = document.body.scrollTop =0; 当点击元素时，让页面的滚动距离为0.写两个是为了兼容。
参考：http://www.cnblogs.com/jingangel/archive/2012/03/08/2385939.html

2. Dreamweaver 怎么做页面回到头部最好用JS

你好！
<script>
lastScrollY=0;
function
heartBeat(){
var
diffY;
if
(document.documentElement
&&
document.documentElement.scrollTop)
diffY
=
document.documentElement.scrollTop;
else
if
(document.body)
diffY
=
document.body.scrollTop
else
{/*Netscape
stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else
percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode="
返回顶部
"
document.write(suspendcode);
window.setInterval("heartBeat()"哗运,1);
<基链/script>
不这段代码加到你的html里，就可以了，如果觉得不美观，可以用图片搏芦孙代替“返回顶部”。
如果对你有帮助，望采纳。

3. 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>

4. 如何通过HTML标记或JS代码实现跳转返回页面顶部

可以通过html的锚标签来实现
<html>
<head></head>
<body>
<a id="top"></a>
.........................


<a href="#top">返回顶部</a>

</body>
</html>
js的写法
页面上的返回顶部按钮
<button type="button" onclick="GoTop()"></button>
js中的写法
function GoTop(){
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
document.body.scrollTop=0;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
document.documentElement.scrollTop=0;
}
}

5. 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);//定位到该位置

6. js : 怎么设置网页滚动条超过800px后，显示“返回顶部”的按钮

.dingbu2{display:none;}

引入 jquery.min.js 文件

$(window).on('猜逗掘scroll',function(){
varst=$(document).scrollTop();
if(st>0){
$('.dingbu2').fadeIn(300);
}else{
$('.dingbu2').fadeOut(300);
}	
});
$(".dingbu2").click(function(){
if(scroll=="off"){
return;
}
指含$("html,body").animate({scrollTop:0},穗核600);
});

7. 如何用js实现网站返回顶部的浮动效果

<html>
<title>JS实现网页右下角浮动的“返回顶部”代码丨网页特效丨csrcode.cn</title>
<body>
<script>
vardisplayed="<nobr><b>[Top]</b></nobr>"

///////////////////////////Donoteditbelowthisline////////////

varlogolink='javascript:window.scrollTo(0,0)'
varns4=document.layers
varie4=document.all
varns6=document.getElementById&&!document.all

functionregenerate(){
window.location.reload()
}
functionregenerate2(){
if(ns4)
setTimeout("window.onresize=regenerate",400)
}

if(ie4||ns6)
document.write('<spanid="logo"style="position:absolute;top:-300;z-index:100">'+displayed+'</span>')

functioncreatetext(){//functionforNS4
staticimage=newLayer(5)
staticimage.left=-300
staticimage.document.write('<ahref="'+logolink+'">'+displayed+'</a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}

functionstaticit(){//functionforIE4/NS6
varw2=ns6?pageXOffset+w:document.body.scrollLeft+w
varh2=ns6?pageYOffset+h:document.body.scrollTop+h
crosslogo.style.left=w2
crosslogo.style.top=h2
}

functionstaticit2(){//functionforNS4
staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-28
staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height-10
}

functioninserttext(){//functionforIE4/NS6
if(ie4)
crosslogo=document.all.logo
elseif(ns6)
crosslogo=document.getElementById("logo")
crosslogo.innerHTML='<ahref="'+logolink+'">'+displayed+'</a>'
w=ns6?window.innerWidth-crosslogo.offsetWidth-20:document.body.clientWidth-crosslogo.offsetWidth-10
h=ns6?window.innerHeight-crosslogo.offsetHeight-15:document.body.clientHeight-crosslogo.offsetHeight-10
crosslogo.style.left=w
crosslogo.style.top=h
if(ie4)
window.onscroll=staticit
elseif(ns6)
startstatic=setInterval("staticit()",100)
}

if(ie4||ns6){
window.onload=inserttext
window.onresize=newFunction("window.location.reload()")
}
elseif(ns4)
window.onload=createtext

functionstaticitns(){//functionforNS4
startstatic=setInterval("staticit2()",90)
}

</script>
页面顶部
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

<palign="center">本特效由<ahref="...
网页特效</a>丨CsrCode.Cn收集于互联网，只为兴趣与学习交流，不作商业用途。</p>

8. 如何用JS实现返回顶部

第一种

/**
*JavaScript脚本实现回到页面顶部示例
*@paramacceleration速度
*@paramstime时间间隔(毫秒)
**/
functiongotoTop(acceleration,stime){
acceleration=acceleration||0.1;
stime=stime||10;
varx1=0;
vary1=0;
varx2=0;
vary2=0;
varx3=0;
vary3=0;
if(document.documentElement){
x1=document.documentElement.scrollLeft||0;
y1=document.documentElement.scrollTop||0;
}
if(document.body){
x2=document.body.scrollLeft||0;
y2=document.body.scrollTop||0;
}
varx3=window.scrollX||0;
vary3=window.scrollY||0;

//滚动条到页面顶部的水平距离
varx=Math.max(x1,Math.max(x2,x3));
//滚动条到页面顶部的垂直距离
vary=Math.max(y1,Math.max(y2,y3));

//滚动距离=目前距离/速度,因为距离原来越小,速度是大于1的数,所以滚动距离会越来越小
varspeeding=1+acceleration;
window.scrollTo(Math.floor(x/speeding),Math.floor(y/speeding));

//如果距离不为零,继续调用函数
if(x&gt;0||y&gt;0){
varrun="gotoTop("+acceleration+","+stime+")";
window.setTimeout(run,stime);
}
}

第二种

functionpageScroll(){
window.scrollBy(0,-10);
scrolldelay=setTimeout('pageScroll()',100);

}

/*
scrollBy()方法可把内容滚动指定的像素数。
语法
scrollBy(xnum,ynum)
参数描述
xnum必需。把文档向右滚动的像素数。
ynum必需。把文档向下滚动的像素数。
8?

9. 返回顶部JS代码网站里有怎么不显示呢

你这个网站的common.js里的这段代码有问题。top变量值一直是0，导致置顶按钮一直隐藏。

改成var top=document.documentElement.scrollTop;就可以了

10. 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>

导航:首页 > 编程语言 > js返回顶部

js返回顶部

与js返回顶部相关的资料

友情链接