导航:首页 > 万维百科 > 网页设计回到顶部

网页设计回到顶部

 发布时间：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

与网页设计回到顶部相关的知识