HTML named anchor not working more than once on iPhone

问题

The named anchor at the bottom of the page doesn't work more than once on an iPhone. Any suggestions? Thanks, Andy.

<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>

回答1:

it seems the iphone doesn't scroll if the anchor doesn't change, which of course it doesn't the second time you click the link. this may be due to the way scrolling works on the iphone (moving the viewport)

i guess one solution would be to use some javascript to alternate the target of your 'back to top' link each time it is clicked, e.g. between '#top' and '#top2'.

EDIT

So i think something like this piece of jquery would do the trick. in the html you just make a load of links that point to #top

the jquery replaces these by topXa where X counts up from 0. we then attach a click handler which swaps the a's for b's on each click. that should make each click unique. add e.g. just before < /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>

来源：https://stackoverflow.com/questions/3344556/html-named-anchor-not-working-more-than-once-on-iphone

标签

html

anchor

iphone

named