admin管理员组

文章数量:1389772

EDITED TO ADD: Interestingly - based up people's ments below - I tried setting up a jump link WITHIN my main page - and that works just fine. (.html - it's in the top left div in the paragraph text) So, for whatever reason, it's in the linking to the separate destination page that the trouble is arising...

I have a page full of photos/captions - and upon clicking the photo or a text link, the viewer is taken to a new page with related bios. The idea is that they are taken directly to the bio that relates to the photo they clicked on. This works fine in Safari and Firefox.

In Chrome, the links all take you to the top of the bio page, not to the relevant bio within the page.

What am I missing here? This should be a simple thing to do, right?

The page can be viewed here: /

I've tried to find some documentation of this being a Chrome issue, and I haven't found anything definite. I've found some questions here at SO that seem to touch on similar issues, but nothing about simple, basic anchor links not working. It may be that I've done something wrong that only Chrome is catching, but the link code seems pretty straightforward and has always worked for me in the past - unless I'm missing some obvious error!

If this is a Chrome idiosyncrasy, can anyone suggest an alternative solution that would work in all browsers?

Thanks!!

EDITED to add code snippets...

Here's the originating page code ... it continues on beyond what I've posted, but it's more of the same:

code here: <!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>UMBC Class of 2012</title>
  <meta name="description" content="UMBC's Class of 2012 Featured Graduates">
    <link rel="shortcut icon" href="../images_new/icon.jpg" />
<meta name="viewport" content="width=device-width,initial-scale=1">



  <!-- CSS Reset -->
  <link rel="stylesheet" href="css/reset.css">

  <!-- Styling for your grid blocks -->
 <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div id="container">
  <div id="logo_holder">
  <div id="logo">
  <?php include("../include/toputilities_classof.shtml"); ?>
</div>
  </div>
  <div id="text_holder">

<div class="header">
  <img src="images/class_text3.gif" height="70" alt="Class of 2012" border="0"> 
  </div>

    </div>

    <div id="main" role="main">

       <ul id="tiles">

    <li style="background-color:#Fc0;padding:14px;">
    <a href="bios.html"><img src="images/mencement_7.jpg" width="200"></a>
      <p style="color:#333;font-size:13px;font-weight:bold;font-style:italic;padding:0 0px 9px 0px;">UMBC is proud of all of our graduates. On May 18 and 21, the University awards nearly 1,700 bachelor’s, master’s and Ph.D. degrees at its Graduate School and Undergraduate Commencement ceremonies. Meet a few of our exceptional students and discover what the future has in store for the Class of 2012.</p>
<!-- Share Button BEGIN -->
<a rel="nofollow" href=".php?u=/" target="_blank" style="text-decoration:none;float:left;margin-right:4px;" title="Share on Facebook" alt="Share on Facebook"><img src="images/facebook.png"/></a>
<a rel="nofollow" href="" class="twitter-share-button" target="_blank" data-count="none" style="text-decoration:none;margin-right:4px;float:left;"title="Share on Twitter" alt="Share on Twitter"><img src="images/twitter.png"/></a>
<a rel="nofollow" href="/+1/confirm?hl=en&url=" target="_blank" style="text-decoration:none;margin-right:4px;float:left;" title="Plus One" alt="Plus One"><img src="images/googleplus.png"/></a>

<a href="/?url=;media=.jpg&description=UMBC's Class of 2012" target="_blank" style="text-decoration:none;"><img border="0" src="images/pinterest.png" title="Pin It" alt="Pin It"/></a>
<!-- Share Button END -->
    </li>
<li style="background-color:#FFC;">
          <p style="padding-bottom:7px;text-align:center;color:#000;margin-top:0;">    <strong>VALEDICTORIAN</strong></p>
          <a href="bios.html#MCole"><img src="images/student_pics/MaryCole.jpg" width="200" alt="Mary Cole" /></a>
        <p><strong>Mary Elizabeth Cole</strong><br>
        Anthropology &amp; Biological Sciences</p>
        <p><em>Here I am standing at the highest point of Bodiam Castle in East Sussex, England. I loved travelling to cultural sites during my study abroad experience.</em></p>
        <p><a href="bios.html#MCole">Read Bio</a></p>
        <p><a href="" target="_blank"><img src="images/video_icon2.png" height="29" border="0" alt="Watch video &gt;"></a></p>
        </li>

AND here's the relevant code on the destination bio page:

    <div id="main" role="main">

       <ul id="tiles">

          <li style="background-color:#FFC;">
         <div id="MCole" class="pic"> 
         <img src="images/photos/MaryCole.jpg" width="240" alt="Mary Cole, Valedictorian" /></div>
        <h3>Mary Elizabeth Cole</h3>


<p style="color:#333;"><strong>Plans: Ph.D., Biological Anthropology, The Ohio State University</strong><br>

B.A., Cultural Anthropology; B.S., Biological Sciences<br>

<em>Summa Cum Laude</em><br>

Hometown: Hanover, Maryland</p>

<p>Mary Elizabeth Cole, valedictorian of UMBC’s class of 2012, is a true Renaissance scholar. She is a Humanities Scholar double-majoring in cultural anthropology and biology who has shined in both fields. Mary Beth has sought out a range of research opportunities at UMBC, gaining early experience in UMBC’s Ecology and Evolution Lab. This prepared her for more independent research at the National Institutes of Health. She later pleted archaeological field and lab work at colonial and prehistoric American Indian sites in southern Maryland. Mary Beth creatively wove together her interests in cultural anthropology and biology through study abroad at the University of Kent in Canterbury, England, where she pleted human osteology coursework to prepare for graduate school. She has been awarded a fellowship for the biological anthropology Ph.D. program at The Ohio State University, which focuses on the history and patterns of disease as discerned through skeletal remains. In addition to pursuing an academic career, Mary Beth hopes to assist military and archaeological groups on post-conflict skeletal recovery. Mary Beth has given back to her munity by helping with local speech and debate tournaments for home-schooled teens; tutoring students in chemistry, math and SAT preparation; and participating in Scholar Selection Day and other prospective student events at UMBC.</p>

<p><em>"At prospective student events I attended, Dr. Hrabowski promised that as long as we worked hard to pursue our dreams, UMBC would do everything possible to transform our efforts into our successes. Throughout my four years, I have seen this university fulfill and exceed that promise in every way possible. The anthropology department, despite its small size, has recruited some of the most intelligent, insightful and encouraging minds in the country. My mentors there provided the education, guidance and endless remendations that pointed me towards my dream of being a biological anthropologist. The biology department provided the coursework and experience that I needed to secure lab experience at UMBC and then NIH. Without these stepping stones to my NIH internship, I would not have discovered the bone histology that I hope to pursue in my doctoral program.” </em>
</p>

<p><iframe width="530" height="298" src="" frameborder="0" allowfullscreen></iframe>
</p>
        </li>

          <li style="background-color:#FFC;">

       <div class="pic" id="RWardlow"> 
        <<img src="images/photos/RobertWardlow.jpg" width="240" alt="Robert Wardlow, Salutatorian" >
        </div>
        <h3>Robert  Douglass Wardlow II</h3>
<p style="color:#333;"><strong>Plans: M.D./Ph.D., Johns Hopkins University</strong><br>
B.S., Biochemistry & Molecular Biology<br>
<em>Summa Cum Laude</em><br>
Hometown: Cherry Hill, New Jersey</p>

<p>As the salutatorian of the class of 2012, Robert Wardlow’s career at UMBC has been full of acplishments. A Meyerhoff Scholar, Barry M. Goldwater Scholar, Howard Hughes Medical Institute Scholar and Rhodes Scholarship finalist, he has presented his research at 12 conferences and symposia, earning numerous awards. Robert’s research focuses on chemical signaling of heart cells and the potential of certain stem cells for providing therapeutic benefits for damaged cells. Excellence in scholarship is intimately connected to munity service for Robert. He co-founded the student group Men Achieving Leadership, Excellence and Success (MALES) to promote munity activism, leadership and academic excellence. Robert’s acplishments have earned him admission into the Phi Beta Kappa, Phi Kappa Phi and Golden Key International honor societies, and he received the HHMI Gilliam Fellowship for Advanced Study.</p>

<p><em>“UMBC has provided an environment rich in resources that has helped me to develop to a level far beyond what I could have originally expected. I was able to display tremendous personal growth over the course of my time here both academically and socially. Courses were challenging, but the school offered more than enough support in terms of tutoring and advising to help me best deal with the load. I had numerous chances to further my research career by gaining experience in research labs both in the area and around the country. I have made friends here that will hopefully last long in to the future as well as meeting mentors that will continue to guide me in the right direction. UMBC has helped me in all facets of my personal and professional development and I hope that I will be able to give back to the school in some capacity in the future.”</em></p>

<p><iframe width="530" height="298" src="" frameborder="0" allowfullscreen></iframe>
</p>
 </li>

If anyone things the full code here would help, I'm happy to do it. Just didn't want to have so much code to slog through when it's a bunch of repeating elements.

EDITED TO ADD: Interestingly - based up people's ments below - I tried setting up a jump link WITHIN my main page - and that works just fine. (http://www.umbc.edu/classof2012/index2.html - it's in the top left div in the paragraph text) So, for whatever reason, it's in the linking to the separate destination page that the trouble is arising...

I have a page full of photos/captions - and upon clicking the photo or a text link, the viewer is taken to a new page with related bios. The idea is that they are taken directly to the bio that relates to the photo they clicked on. This works fine in Safari and Firefox.

In Chrome, the links all take you to the top of the bio page, not to the relevant bio within the page.

What am I missing here? This should be a simple thing to do, right?

The page can be viewed here: http://www.umbc.edu/classof2012/

I've tried to find some documentation of this being a Chrome issue, and I haven't found anything definite. I've found some questions here at SO that seem to touch on similar issues, but nothing about simple, basic anchor links not working. It may be that I've done something wrong that only Chrome is catching, but the link code seems pretty straightforward and has always worked for me in the past - unless I'm missing some obvious error!

If this is a Chrome idiosyncrasy, can anyone suggest an alternative solution that would work in all browsers?

Thanks!!

EDITED to add code snippets...

Here's the originating page code ... it continues on beyond what I've posted, but it's more of the same:

code here: <!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>UMBC Class of 2012</title>
  <meta name="description" content="UMBC's Class of 2012 Featured Graduates">
    <link rel="shortcut icon" href="../images_new/icon.jpg" />
<meta name="viewport" content="width=device-width,initial-scale=1">



  <!-- CSS Reset -->
  <link rel="stylesheet" href="css/reset.css">

  <!-- Styling for your grid blocks -->
 <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div id="container">
  <div id="logo_holder">
  <div id="logo">
  <?php include("../include/toputilities_classof.shtml"); ?>
</div>
  </div>
  <div id="text_holder">

<div class="header">
  <img src="images/class_text3.gif" height="70" alt="Class of 2012" border="0"> 
  </div>

    </div>

    <div id="main" role="main">

       <ul id="tiles">

    <li style="background-color:#Fc0;padding:14px;">
    <a href="bios.html"><img src="images/mencement_7.jpg" width="200"></a>
      <p style="color:#333;font-size:13px;font-weight:bold;font-style:italic;padding:0 0px 9px 0px;">UMBC is proud of all of our graduates. On May 18 and 21, the University awards nearly 1,700 bachelor’s, master’s and Ph.D. degrees at its Graduate School and Undergraduate Commencement ceremonies. Meet a few of our exceptional students and discover what the future has in store for the Class of 2012.</p>
<!-- Share Button BEGIN -->
<a rel="nofollow" href="http://www.facebook./share.php?u=http://www.umbc.edu/classof2012/" target="_blank" style="text-decoration:none;float:left;margin-right:4px;" title="Share on Facebook" alt="Share on Facebook"><img src="images/facebook.png"/></a>
<a rel="nofollow" href="https://twitter./share" class="twitter-share-button" target="_blank" data-count="none" style="text-decoration:none;margin-right:4px;float:left;"title="Share on Twitter" alt="Share on Twitter"><img src="images/twitter.png"/></a>
<a rel="nofollow" href="https://plusone.google./_/+1/confirm?hl=en&url=http://www.umbc.edu/classof2012" target="_blank" style="text-decoration:none;margin-right:4px;float:left;" title="Plus One" alt="Plus One"><img src="images/googleplus.png"/></a>

<a href="http://pinterest./pin/create/button/?url=http://www.umbc.edu/classof2012&media=http://www.umbc.edu/classof2012/images/mencement_7.jpg&description=UMBC's Class of 2012" target="_blank" style="text-decoration:none;"><img border="0" src="images/pinterest.png" title="Pin It" alt="Pin It"/></a>
<!-- Share Button END -->
    </li>
<li style="background-color:#FFC;">
          <p style="padding-bottom:7px;text-align:center;color:#000;margin-top:0;">    <strong>VALEDICTORIAN</strong></p>
          <a href="bios.html#MCole"><img src="images/student_pics/MaryCole.jpg" width="200" alt="Mary Cole" /></a>
        <p><strong>Mary Elizabeth Cole</strong><br>
        Anthropology &amp; Biological Sciences</p>
        <p><em>Here I am standing at the highest point of Bodiam Castle in East Sussex, England. I loved travelling to cultural sites during my study abroad experience.</em></p>
        <p><a href="bios.html#MCole">Read Bio</a></p>
        <p><a href="http://www.youtube./embed/WG4B9e7A5pA" target="_blank"><img src="images/video_icon2.png" height="29" border="0" alt="Watch video &gt;"></a></p>
        </li>

AND here's the relevant code on the destination bio page:

    <div id="main" role="main">

       <ul id="tiles">

          <li style="background-color:#FFC;">
         <div id="MCole" class="pic"> 
         <img src="images/photos/MaryCole.jpg" width="240" alt="Mary Cole, Valedictorian" /></div>
        <h3>Mary Elizabeth Cole</h3>


<p style="color:#333;"><strong>Plans: Ph.D., Biological Anthropology, The Ohio State University</strong><br>

B.A., Cultural Anthropology; B.S., Biological Sciences<br>

<em>Summa Cum Laude</em><br>

Hometown: Hanover, Maryland</p>

<p>Mary Elizabeth Cole, valedictorian of UMBC’s class of 2012, is a true Renaissance scholar. She is a Humanities Scholar double-majoring in cultural anthropology and biology who has shined in both fields. Mary Beth has sought out a range of research opportunities at UMBC, gaining early experience in UMBC’s Ecology and Evolution Lab. This prepared her for more independent research at the National Institutes of Health. She later pleted archaeological field and lab work at colonial and prehistoric American Indian sites in southern Maryland. Mary Beth creatively wove together her interests in cultural anthropology and biology through study abroad at the University of Kent in Canterbury, England, where she pleted human osteology coursework to prepare for graduate school. She has been awarded a fellowship for the biological anthropology Ph.D. program at The Ohio State University, which focuses on the history and patterns of disease as discerned through skeletal remains. In addition to pursuing an academic career, Mary Beth hopes to assist military and archaeological groups on post-conflict skeletal recovery. Mary Beth has given back to her munity by helping with local speech and debate tournaments for home-schooled teens; tutoring students in chemistry, math and SAT preparation; and participating in Scholar Selection Day and other prospective student events at UMBC.</p>

<p><em>"At prospective student events I attended, Dr. Hrabowski promised that as long as we worked hard to pursue our dreams, UMBC would do everything possible to transform our efforts into our successes. Throughout my four years, I have seen this university fulfill and exceed that promise in every way possible. The anthropology department, despite its small size, has recruited some of the most intelligent, insightful and encouraging minds in the country. My mentors there provided the education, guidance and endless remendations that pointed me towards my dream of being a biological anthropologist. The biology department provided the coursework and experience that I needed to secure lab experience at UMBC and then NIH. Without these stepping stones to my NIH internship, I would not have discovered the bone histology that I hope to pursue in my doctoral program.” </em>
</p>

<p><iframe width="530" height="298" src="http://www.youtube./embed/WG4B9e7A5pA" frameborder="0" allowfullscreen></iframe>
</p>
        </li>

          <li style="background-color:#FFC;">

       <div class="pic" id="RWardlow"> 
        <<img src="images/photos/RobertWardlow.jpg" width="240" alt="Robert Wardlow, Salutatorian" >
        </div>
        <h3>Robert  Douglass Wardlow II</h3>
<p style="color:#333;"><strong>Plans: M.D./Ph.D., Johns Hopkins University</strong><br>
B.S., Biochemistry & Molecular Biology<br>
<em>Summa Cum Laude</em><br>
Hometown: Cherry Hill, New Jersey</p>

<p>As the salutatorian of the class of 2012, Robert Wardlow’s career at UMBC has been full of acplishments. A Meyerhoff Scholar, Barry M. Goldwater Scholar, Howard Hughes Medical Institute Scholar and Rhodes Scholarship finalist, he has presented his research at 12 conferences and symposia, earning numerous awards. Robert’s research focuses on chemical signaling of heart cells and the potential of certain stem cells for providing therapeutic benefits for damaged cells. Excellence in scholarship is intimately connected to munity service for Robert. He co-founded the student group Men Achieving Leadership, Excellence and Success (MALES) to promote munity activism, leadership and academic excellence. Robert’s acplishments have earned him admission into the Phi Beta Kappa, Phi Kappa Phi and Golden Key International honor societies, and he received the HHMI Gilliam Fellowship for Advanced Study.</p>

<p><em>“UMBC has provided an environment rich in resources that has helped me to develop to a level far beyond what I could have originally expected. I was able to display tremendous personal growth over the course of my time here both academically and socially. Courses were challenging, but the school offered more than enough support in terms of tutoring and advising to help me best deal with the load. I had numerous chances to further my research career by gaining experience in research labs both in the area and around the country. I have made friends here that will hopefully last long in to the future as well as meeting mentors that will continue to guide me in the right direction. UMBC has helped me in all facets of my personal and professional development and I hope that I will be able to give back to the school in some capacity in the future.”</em></p>

<p><iframe width="530" height="298" src="http://www.youtube./embed/BJXAazzRP10" frameborder="0" allowfullscreen></iframe>
</p>
 </li>

If anyone things the full code here would help, I'm happy to do it. Just didn't want to have so much code to slog through when it's a bunch of repeating elements.

  • javascript
  • html
  • css
  • google-chrome
Share Improve this question edited May 18, 2012 at 15:40 Haikukitty asked May 18, 2012 at 14:13 HaikukittyHaikukitty 1622 silver badges15 bronze badges 18
  • If you could post some of your code here, that'd be great. – SomeKittens Commented May 18, 2012 at 14:18
  • Have you tried putting the id-attribute on the h3 tag instead of the div? It might have something to do with the image in the anchor.. – iddo Commented May 18, 2012 at 14:27
  • @Iddo: No I have not, it's worth a shot. I'll try it and see if it makes a difference. – Haikukitty Commented May 18, 2012 at 15:04
  • @Huangism: I don't understand this ment but it's not particularly helpful. – Haikukitty Commented May 18, 2012 at 15:07
  • 1 Using ids works in the latest Chrome on Windows, tested using this: jsfiddle/VySQA – shanethehat Commented May 18, 2012 at 15:25
 |  Show 13 more ments

4 Answers 4

Reset to default 6

Try this dirty hack,

var hash = location.hash;
location.hash = '';
location.hash = hash;

on window load or document.ready

When the page loads, it looks like the lis are set to display: none, then changed to display: list-item via JavaScript. Most likely Chrome/IE are trying to jump to the block as soon as HTML is loaded, but the blocks haven't been displayed yet.

I'd guess that's your problem. That's an odd setup you have also, with the absolute positioned blocks (I think that's the wookmark plugin?) — it seems the same could be done with plain CSS without absolute positioning.

This:

$( "[href^=#]" ).click(function() {
    location.hash = $(this).attr("href")
})

worked for me. As many others mentioned, it's a bug in Chrome.

I think the destination code does not have the anchor

<a name="bioName">

Update

Well testing using IDs works as well, just not on your page. maybe it's the content

本文标签： javascriptChrome bug or coding error Anchorid links within destination page not workingStack Overflow

版权声明：本文标题：javascript - Chrome bug or coding error? Anchorid links within destination page not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744592393a2614572.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。