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返回頂部相關的資料

友情鏈接