HTML named anchor not working more than once on iPhone

落花浮王杯 提交于 2020-03-04 02:33:23

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!