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

Posted 2020-08-19 奋斗的少年WH

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了锚点target="page1"浮标回到顶部(该点未实现，能力不足)相关的知识，希望对你有一定的参考价值。

 <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"浮标回到顶部(该点未实现，能力不足)的主要内容，如果未能解决你的问题，请参考以下文章

vue项目中使用锚点

thymeleaf的锚点连接里面怎么传参数