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