導航:首頁 > 萬維百科 > 網頁設計回到頂部

網頁設計回到頂部

 發布時間：2021-03-11 19:54:04

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、網頁製作中返回頂層代碼

在你的網頁頂部添加一個
錨記：<a
name="top"
id=「top」></a>

然後在你網站下面的：<a
href="#top">返回頂部</a>

ok了！

3、網頁設計中返回頂部怎麼設置

用到的是錨鏈接技術，你搜索下什麼是錨鏈接就知道了。

4、html css JS 怎麼設計點擊回頂部效果？

js代碼：

function pageScroll()
 {     
  //把內容滾動指定的像素數（第一個參數是向右滾動的像素數，第二個參數是向下滾動的像素數）    
  window.scrollBy(0,-100);    
  //延時遞歸調用，模擬滾動向上效果    
  scrolldelay = setTimeout('pageScroll()',100);    
  //獲取scrollTop值，聲明了DTD的標准網頁取document.documentElement.scrollTop，否則取document.body.scrollTop；因為二者只有一個會生效，另一個就恆為0，所以取和值可以得到網頁的真正的scrollTop值    
  var sTop=document.documentElement.scrollTop+document.body.scrollTop;    
  //判斷當頁面到達頂部，取消延時代碼（否則頁面滾動到頂部會無法再向下正常瀏覽頁面）    
  if(sTop==0) clearTimeout(scrolldelay);
 }

html代碼：

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

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

<div id="goTopBtn" title="Top" style="bottom: 130px;">

</div>

<script type="text/javascript">
    $(window).scroll(function () {
        var sc = $(window).scrollTop();
        var rwidth = $(window).width(); //當前頁面寬度
        var iwidth = $("#goTopBtn").width(); //top圖片寬度

            var swidth = (rwidth - 980) / 2; //計算主體內容距離左邊框空白區寬度
            if (sc > 0) {
                $("#goTopBtn").css("display", "block");
                $("#goTopBtn").css("left", (980 + swidth) + "px");
            } else {
                $("#goTopBtn").css("display", "none");
            }
        }
      
    $("#goTopBtn").click(function () {
        var sc = $(window).scrollTop();
        $('body,html').animate({ scrollTop: 0 }, 500);
    })

</script>

6、製作網頁如何做出「返回頂部」圖標並固定在頁面右下的位置？

<!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>

7、製作網站回頂層怎麼設計?

用javascript，返回頂部就是offsetTop=0

與網頁設計回到頂部相關的知識