名为锚的HTML不能在iPhone上多次使用 [英] HTML named anchor not working more than once on iPhone
本文介绍了名为锚的HTML不能在iPhone上多次使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
页面底部的指定锚点在iPhone上不会运行一次以上。有什么建议么？感谢Andy。
< html>
< head>
< title>锚点滚动测试< / title>
< meta name =viewportcontent =width = 320; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;/>
< meta http-equiv =content-typeCONTENT =text / html; charset = UTF-8>
< meta name =authorcontent =Andy Cheeseman>
< / head>
< body>
< a name ='top'>< / a>
< div id ='page_title'> iPhone优化网站< / div>
< div id ='note'>目前，iPhone和iPod无法显示全功能Flash网站。但是，您可以浏览以下网站的内容。< / div>
< a href ='＃1'class ='menu'>链接到第1部分< / a>< br />
< a href ='＃2'class ='menu'>链接至第2部分< / a>< br />
< a name ='1'>< / a>
< div id ='title'>第1部分< / div>
< div id ='content'>这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！这是第一部分的内容！< / div>
< a name ='2'>< / a>
< div id ='title'>第2部分< / div>
< div id ='content'>这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！这是第二部分的内容！ < / DIV>
< a href ='＃top'class ='back_to_top'>返回页首< / a>
< / body>
< / html>
解决方案
不更改，当然这不是第二次点击链接。这可能是由于滚动iPhone上的方式（移动视口）
我想一种解决方案是使用一些javascript来替换你的背部的目标每次点击时链接到顶部链接，例如之间'#top'和'＃top2'。
编辑
所以我觉得像这块jquery会做的伎俩。在html中，你只需要加载指向#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' 属性）;
如果（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]'）。
attr（'href'，'#top'+（counter ++）+'a'）
.click（switch_top）;
}）;
}）;
< / script>
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>
解决方案
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>
这篇关于名为锚的HTML不能在iPhone上多次使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
