导航:首页 > 万维百科 > 网页设计返回顶端链接

网页设计返回顶端链接

发布时间:2021-03-04 10:05:43

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网页中怎样实现“返回顶部”的效果?

<div id="top">顶部</div>

<a href="#top">返回顶部</a>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>返回顶部</title>

<style type="text/css">

body{height:1000px;}

</style>

</head>


<body>

<div style="height:800px; width:800px;"></div>

<a href="javascript:scroll(0,0)">返回顶部</a>

</body>

</html>

2、采用JS实现返回顶部:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>返回顶部</title>

<style type="text/css">

body{height:1000px;}

</style>


</head>


<body>

<div style="height:800px; width:800px;"></div>

<script src="js/gototop.js"></script>

<div class="back-top-container" id="gotop">

<div class="yb_conct">

<div class="yb_bar">

<ul>

<li class="yb_top">返回顶部</li>

</ul>

</div>

</div>

</div>

</body>

</html>


3、利用锚点返回顶部:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>返回顶部</title>


</head>


<body>


<a href="#5F">顶部</a> 

<div style="height:300px; width:300px;"></div>

<a name="5F">返回顶部</a>

</body>

</html>

8、如何解决返回顶端和页面链接的矛盾?

<a href="#" target="self">顶部</a>

9、给网页加一个返回顶部的按钮

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

与网页设计返回顶端链接相关的知识