1

页面底部的命名锚点在 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>
4

1 回答 1

1

如果锚点没有改变， iPhone似乎不会滚动，当然它不会在您第二次单击链接时滚动。这可能是由于 iphone 上的滚动工作方式（移动视口）

我想一种解决方案是使用一些 javascript 来替换每次单击“返回顶部”链接的目标，例如在“#top”和“#top2”之间。

编辑

所以我认为像这段 jquery 这样的东西可以解决问题。在 html 中，您只需加载大量指向 #top 的链接

jquery用topXa替换这些，其中X从0开始计数。然后我们附加一个点击处理程序，在每次点击时将a交换为b。这应该使每次点击都是独一无二的。在 </body> 之前添加 eg

<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-27T14:41:51.657 回答