網頁設計返回頂端鏈接_網頁設計裡面的返回超鏈接怎麼弄啊

1、網頁設計中怎樣設置超鏈接到頁頂

<html>
<head></head>
<body id="top">
<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>
</body>
</html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
//首先將#back-to-top隱藏
$("#back-to-top").hide();
//當滾動條的位置處於距頂部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);
return false;
});
});
});
</script>

2、html網頁中怎樣實現「返回頂部」的效果？

3、超級鏈接中，「＃」表示返回網頁頂端嗎？

稱之為空鏈接，但是<a href="#" >ABCDEG</a>與<a href="" >ABCDEG</a>是兩個完全不同的東西，後者將會導致頁面版顯示失敗，前者則不會，所權謂的返回頁面頂端的說法其實並不標准，現在firefox的新版本不會返回頁面頂端，正確的返回頂端的代碼需要通過JavaScript實現，通常是在頁頂放一個隱藏的input然後讓其獲得焦點頁面即會立刻跳到頁首

4、如何為網頁添加返回頂部按鈕

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>

5、HTML網頁中一張圖片給它一個返回頂部功能的鏈接是什麼？

最簡單的方法： <a href="#"><img src="圖片路徑" /></a>
滿意請採納

6、網頁設計裡面的返回超鏈接怎麼弄啊

你所說的這個返回超鏈接是指的什麼呢？
如果是說頁面下方有一個返回頂部這樣的超鏈接的話
可以在需要跳轉至的部分使用name屬性來聲明這個部分
然後在a標簽的href屬性中使用#+『定義的name』實現頁內跳轉

7、網頁中「返回頂部」的html代碼怎麼編寫？

網站的網頁中都有返回頂部的功能，就是當用戶訪問網頁時，可以迅速的返回頂部。也許會有人覺得這個功能很簡單，沒有什麼說的，但據我目前所知，就有五種方法實現這個功能。而且不同的方法能實現的效果也是有所不同的。下面介紹下這些方法網頁中「返回頂部」的html代碼有好幾種不同的編寫方式：

1、簡單的腳本可實現此功能：

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body{height:1000px;}

</style>

</head>

<body>

</body>

</html>

2、採用JS實現返回頂部：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body{height:1000px;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

3、利用錨點返回頂部：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

8、如何解決返回頂端和頁面鏈接的矛盾？

9、給網頁加一個返回頂部的按鈕

</div>

導航:首頁 > 萬維百科 > 網頁設計返回頂端鏈接

網頁設計返回頂端鏈接

與網頁設計返回頂端鏈接相關的知識