首页 > 代码库 > 锚点、target="page1"、浮标回到顶部(该点未实现，能力不足)

锚点、target="page1"、浮标回到顶部(该点未实现，能力不足)

2024-08-20 10:39:20   237人阅读

 <html>
<head>
  <meta charset="utf-8">
  <title>链接</title>
<!--
HTML页面
<div id="gotop"></div>
-->  
<!--CSS样式-->  
<style type="css/text">
    #gotop{position:fixed;right:10px;bottom:10px;display:none}
</style>
<!--JavaScript脚本-->
<script type="javascript/text">
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop > 100){
                $("#gotop").fadeIn(1000);//一秒渐入动画
            }else{
                $("#gotop").fadeOut(1000);//一秒渐隐动画
            }
        });
         
        $("#gotop").click(function(){
            $(‘body,html‘).animate({scrollTop:0},1000);
        });
    });
</script>

</head>

<body>
<h1>target在目标地点打开网页</h1>
<a href="http://www.baidu.com" target="page1">在IFRAME中打开百度首页</a>
<a href="../character.htm" target="page1">在IFRAME中打开字符实体示例</a>
<iframe style="width: 600px; height: 300px; border: 1px solid #666;" name="page1">
</iframe>

<h1>锚点</h1>
<table width="600px" height="20px" border="1" cellspacing="0" cellpadding="5px">
<tr>
    <td><a href="#top">top</a></td>
    <td><a href="#center">center</a></td>
    <td><a href="#buttom">buttom</a></td>
</tr>
</table>

<a name="top">top</a>
<table width="600px" height="300px">
<tr><td>111</td></tr>
</table>
 
<a name="center">center</a>
 
<table width="600px" height="300px">
<tr><td>111</td></tr>
</table>

<a name="buttom">buttom</a>
</body>
</html>

 

锚点、target="page1"、浮标回到顶部(该点未实现，能力不足)


联系
我们