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 はスクロールしないようです。もちろん、リンクを 2 回クリックしたときにはスクロールしません。これは、iPhone でのスクロールの動作 (ビューポートの移動) が原因である可能性があります。

解決策の 1 つは、javascript を使用して、クリックされるたびに「トップに戻る」リンクのターゲットを、たとえば「#top」と「#top2」の間で切り替えることだと思います。

編集

したがって、このjqueryのようなものがうまくいくと思います。html では、#top を指すリンクを大量に作成するだけです。

jquery はこれらを topXa に置き換えます。ここで、X は 0 からカウントアップします。次に、クリックごとに a を b に交換するクリック ハンドラをアタッチします。これにより、各クリックが一意になります。直前に例を追加 < /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-27T14:41:51.657 に答える