HTML命名的锚在iPhone上不能多于一次工作

页面底部的命名锚点在iPhone上不能运行一次以上。有什么建议么？谢谢，安迪。HTML命名的锚在iPhone上不能多于一次工作

<html> 
<head> 

<title>anchor scroll test</title> 

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 
<meta http-equiv="content-type" CONTENT="text/html; charset=UTF-8"> 
<meta name="author" content="Andy Cheeseman"> 

</head> 
<body> 

<a name='top'></a> 
<div id='page_title'>iPhone Optimised Site</div> 

<div id='note'>Presently, iPhones and iPods can't display fully featured flash websites. But you can however browse the websites content below.</div> 

<a href='#1' class='menu'>Link to Section 1</a><br/> 
<a href='#2' class='menu'>Link to Section 2</a><br/> 

<a name='1'></a> 
<div id='title'>Section 1</div> 
<div id='content'>This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one! This is the content from section one!</div> 

<a name='2'></a> 
<div id='title'>Section 2</div> 
<div id='content'>This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! This is the content from section two! </div> 

<a href='#top' class='back_to_top'>Back to Top</a> 

</body> 
</html>

来源

2010-07-27 Andy Cheeseman

看来，如果锚不变化，当然它不会第二次单击该链接的iPhone不滚动。这可能是由于在iPhone上滚动的方式（移动视口）

我想一个解决方案是使用一些JavaScript来替换每次点击时“回到顶部”链接的目标。 '#top'和'＃top2'之间。

编辑

所以我认为像这一块的jQuery会做的伎俩。在html中，你只需要加载指向＃top的链接，就可以加载#top

jquery用topXa替换这些，其中X从0开始递增。然后，我们附加一个点击处理程序，在每次点击时交换b的a。这应该使每次点击都是唯一的。添加例如就在</body>

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     switch_top = function(e) { 
     var link = $(e.target); 
     var href = link.attr('href'); 
     if(href.search('a') != -1) 
      href = href.replace('a','b'); 
     else 
      href = href.replace('b','a'); 

     link.attr('href',href); 
     }; 

     var counter = 0; 
     $('a[href="#top"]').each(function(index, value) { 
     link = $(value); 
     link. 
      attr('href', '#top' + (counter++) + 'a') 
      .click(switch_top); 
     }); 

    }); 
</script>

来源

2010-07-27 14:41:51 second

你能告诉我一些这个例子的java脚本吗？ – 2010-07-29 12:32:17

......并且可能值得一提的是，我计划在每个部分之后都有一个“返回顶部”按钮。 – 2010-07-29 12:33:03

HTML命名的锚在iPhone上不能多于一次工作

回答

相关问题