1、做網站 回到頂部 的圖標素材哪裡有?
百度裡面有免費的網站頂部素材下載
找找就有了
2、點擊網頁底部的top按鈕直接回到網頁頂部,怎麼做?用js怎麼表達
看你是否需要到頂部的動畫效果,如果不需要動畫效果而是直接回到網頁頂部,那麼根本版不需要去權使用JS。
如:在頁面的最頂端設置錨點 <a name="top"></a>
然後在回到頂部的top按鈕加連接 <a href="#top">top</a> 就可以了
當然JS也能實現,主要是給scrolltop賦值為0,從而回到頁面頂部。
3、製作網頁如何做出「返回頂部」圖標並固定在頁面右下的位置?
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>SCROLL</title>
<style type="text/css">
</style>
<script type="text/javascript">
var goToWhere = function (where)
{
var me = this;
clearInterval (me.interval);
me.site = [];
var dom = !/.*chrome.*/i.test (navigator.userAgent) ? document.documentElement : document.body;
var height = !!where ? dom.scrollHeight : 0;
me.interval = setInterval (function ()
{
var speed = (height - dom.scrollTop) / 16;
if (speed == me.site[0])
{
clearInterval (me.interval);
return null;
}
dom.scrollTop += speed;
me.site.unshift (speed);
}, 16);
};
</script>
</head>
<body>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">5</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">4</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">3</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">2</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">1</div>
<div style="height: 1000px; text-align: center; font-size: 200px; font-weight: bold;">0</div>
<div id="back-up" onclick="goToWhere(0)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 150px;">返回頂部</div>
<div id="back-up" onclick="goToWhere(1)"
style="border: 1px solid red; height: 100px; width: 15px; position: fixed; cursor: pointer; right: 10px; bottom: 30px;">返回底部</div>
</body>
</html>
4、如何做出「返回頂部」圖標,並固定在頁面右下的位置?(網站是.net寫的)
<div style="width:20px;height:100px; position:fixed; right:0px; bottom:0px;>
<p>^</p>
<a href="javascript:scroll(0,0)">返回頂部</a>
</div>
5、如何為網頁添加返回頂部按鈕
1、純js,無動畫版本
[html] view plain copy
window.scrollTo(x-coord, y-coord);
[html] view plain copy
如:window.scrollTo(0,0);
2、純js,帶動畫版本
生硬版:
[html] view plain copy
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
流暢版:
[html] view plain copy
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
3、jQuery,帶動畫版本
首先需要在頂部添加如下html元素:
[html] view plain copy
<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>
</span>
其中a標簽指向錨點top,可以在頂部防止一個<a name="top"></a>的錨點,這樣在瀏覽器不支持js時也可以實現返回頂部的效果了。
要想讓返回頂部的圖片顯示在右側,還需要一些css樣式,如下:
[css] view plain copy
<span style="font-size:14px">/*returnTop*/
p#back-to-top{
position:fixed;
display:none;
bottom:100px;
right:80px;
}
p#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:64px;
/*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
p#back-to-top a:hover{
color:#979797;
}
p#back-to-top a span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
border-radius:6px;
display:block;
height:64px;
width:56px;
margin-bottom:5px;
/*使用CSS3中的transition屬性給<span>標簽背景顏色添加漸變效果*/
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
}
</span>
上面樣式中的背景圖片是雪碧圖,下面提供兩個單獨的返回頂部圖片方便朋友們使用:
有了html和樣式,我們還需要用js控制返回頂部按鈕,在頁面滾動時漸隱漸現返回頂部按鈕。
[html] view plain copy
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
//當滾動條的位置處於距頂部100像素以下時,跳轉鏈接出現,否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//當點擊跳轉鏈接後,回到頁面頂部位置
$("#back-to-top").click(function(){
//$('body,html').animate({scrollTop:0},1000);
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000);
return false;
}
$('body').animate({ scrollTop: 0 }, 1000);
return false;
});
});
});
</script>
6、如何在一個網頁里製作一個圖片,點擊它就能回到那個人網頁的頂部
他給你的是一個代碼,你在編輯裡面粘貼進去即可
7、給網頁加一個返回頂部的按鈕
<div id="goTopBtn" title="Top" style="bottom: 130px;">
</div>
<script type="text/javascript">8、網頁中「返回頂部」圖標怎樣做
搜教程,七浦路返回頂部圖標製作教程
9、jquery網頁回到頂部效果(圖標漸隱,自寫)
唔,進來開發需求,當網頁內容草雞多的時候,用戶就需要有個按鈕快速回到頂部,而不是自己去滾滑輪~
原本以為比較難的說,因為上頭要求全部用js來實現,哪個頁面引用,哪個頁面顯示。
於是乎,本屌絲就嘗試寫了下,唔,沒發現,還挺easy的說~~
有屁我就快放了,直接上代碼,屁放多了就成屎了~~唔,罪過,阿彌陀佛,阿門~~
復制代碼
代碼如下:
<pre
name="code"
class="javascript">//回到頂部js
$(function(){
var
$btn_top
=
$('<a
id="scrollTopBtn"><img
src="css/web/images/scrollTop.png"></a>');
$btn_top.css({
'display':'none',
'width':'40px',
'height':'40px',
'position':'fixed',
'right':'20px',
'bottom':'100px',
'z-index':'999'
});
$("body").append($btn_top);
$("body").on("click","#scrollTopBtn",function(){
$("html,body").animate({scrollTop:
0},"slow");
});
var
$btn
=
$("#scrollTopBtn");
if($(window).scrollTop()
>
100){
$btn.fadeIn(600);
}
$(window).scroll(function(){
if($(window).scrollTop()
>
100){
$btn.fadeIn(600);
}else{
$btn.fadeOut(600);
}
});
});
圖片自己找個就好啦,我這里用的是絕對路徑「css/web/images/scrollTop.png」
直接在第五行和第六行改下大小即可,這樣就避免了頁面添加貓標簽~~(>^ω^<)喵~~~
存成js文件,直接引用,哪疼用哪,誰用誰知道~~~