链接到div工作不正常（仅限chrome）

时间：2014-05-15 16:55:47

标签： javascript html google-chrome

我在我的网站上有链接到页面上的div：

仅在这个发生的时候：
我的问题是，无论何时使用此链接（即使您只是将其粘贴到Chrome浏览器中），在初始页面加载时，浏览器都会向下滚动到链接并返回到页面顶部。这让我疯狂，我无法弄清楚问题，（我知道我的源代码不是最漂亮的）。

我无法找到这个主题/问题，但如果存在，请指出一个副本。

以下是该页面的一些示例代码：

<div class="row">
<div class="col-md-2"><!-- Services side panel-->

       <nav class="navbar navbar-default hidden-lg hidden-md">
       <div class="container-fluid">
         <ul class="nav navbar-nav white">
         <li><a href="#womenshealth">Womens Health</a></li>
         <li><a href="#molec">Molecular Diagnostics</a></li>
         <li><a href="#gastro">GI / Liver</a></li>
         <li><a href="#derm">Dermatology</a></li>
         <li><a href="#hema">Hematopathology</a></li>
         <li><a href="#surg">Surgial Pathology</a></li>
         <li><a href="#urology">Genitourinary</a></li>
         <li><a href="#clinical">Clinical Lab</a></li>
         <li><a href="#hospital">Hospital Services</a></li>
         </ul>
       </div>
       </nav>

       <div class="btn-group-vertical services hidden-sm  hidden-xs" data-spy="affix"  data-offset-top="0" data-offset-bottom="300">
         <a class="btn btn-default" role="button" href="#womenshealth">Womens Health</a>
         <a class="btn btn-default" role="button" href="#molec">Molecular Diagnostics</a>
         <a class="btn btn-default" role="button" href="#gastro">GI / Liver</a>
         <a class="btn btn-default" role="button" href="#derm">Dermatology</a>
         <a class="btn btn-default" role="button" href="#hema">Hematopathology</a>
         <a class="btn btn-default" role="button" href="#surg">Surgial Pathology</a>
         <a class="btn btn-default" role="button" href="#urology">Genitourinary</a>
         <a class="btn btn-default" role="button" href="#clinical">Clinical Lab</a>
         <a class="btn btn-default" role="button" href="#hospital">Hospital Services</a>
     </div>
  </div>
<div class="col-md-10" id="srvcs" data-spy="scroll" data-target="#myNavbar"><!-- Services sections -->

<div id="womenshealth"></div>
<div class="well" >
    <div class="row">
        <div class="col-md-3"><span class="plugin_picture">

<img src="/media/cms_page_media/7/women_icon_lrg.jpg" alt="" />

</span></div>
        <div class="col-md-9"><h1 class="depth" title="Womens Health">Womens Health</h1>
<p>Quality</p><ul><li>14 experienced board certified pathologists, including 3 board certified in cytopathology</li><li>6 experienced cytotechnologists</li><li>2 experienced Clinical Genetic Molecular Biology Scientists </li></ul><p>Full Panel of GYN Testing</p><ul><li>Fully certified in ThinPrep, SurePath and Convential pap testing.</li><li><em>Chlamydia trachomatis </em>(CT) and <em>Neisseria gonorrohoeae </em>(NG) testing using Aptima Combo 2 Assay from liquid-based paps, swabs and urine.</li><li>High Risk HPV testing using the COBAS platform from liquid-based paps.</li><li>BD Affirm VPIII testing testing for <em>Candida species, Gardnerella vaginitis</em> and <em>Trichomonas vaginalis</em>.</li><li>Correlation of biopsies to pap smears.</li><li>Certified in SpiraBrush Biopsy technique for a virtually painless biopsy.</li></ul>
<div>


<p>Breast Health</p><ul><li>Onsite ER/PR and Her2 testing.</li><li>Close association with the nationally recognized Radin Breast Center.</li><li>Quick turn-around on Breast FNA's and biopsies.</li></ul><p>Fast Results</p><ul><li>Two day turn-around time on almost 95% of all paps (including ancillary testing).</li><li>Two day turn-around time for most biopsies.</li><li>24 hour turn-around time on breast FNA's.</li></ul><p>Exceptional Service</p><ul><li>Pathologists and cytotechnologists available by phone for any and all questions.</li><li>Local service means ease of adding additional testing to already received material. </li><li>In house IT to work with EMR.</li><li>In house billing to provide support for patients and insurers. </li><li>Negative pap smear results available by phone using the LabCalls service.  </li></ul></div>

<div class="panel panel-default">
  <div class="panel-body center">
    <h3>Learn more and view our resources</h3>

     <a href="/physicians/services/womens-health" class="btn btn-default">Learn more</a>
   </div>
</div>
<img src="/media/assets/images/bentedges.png" class="img-responsive up20">
</div>
    </div>
</div>
<img class="img-responsive up20 center" src="/media/images/bottom-shadow.png"/>
<div id="molec"></div>
<div class="well">
        <div class="row">
                <div class="col-md-3"><span class="plugin_picture">

<img src="/media/cms_page_media/7/dna.jpg" alt="" />

</span></div>
</div> <!--end row -->


<!-- Help Modal -->

<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpmodal" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times </button>
    <h4 class="modal-title" id="helpmodal">Help <span class="glyphicon glyphicon-question-sign"></span></h4>
   </div>

   <div class="modal-body">
    <p>Need help? Fill out the form below and we will reach out to you asap.</p>
    <br/>
    <iframe id="JotFormIFrame" allowtransparency="true" src="http://form.jotform.us/form/41198414446154" frameborder="0" style="width:100%; height:752px; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script> 
   </div>

  </div>
 </div>
</div>
<!-- End Help -->

<!-- Inserts Block JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<Script src="/media/boots/js/bootstrap.min.js"></script>
<script src="/media/boots/js/jqBootstrapValidation.js"></script>
<!--<script src="/media/boots/js/contact_me.js"></script>-->

<script> <!-- Start Carousel -->
  $('.navbar .dropdown').hover(function() {
   $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
  }, function() {
   $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
  });
</script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-48086237-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

2 个答案:

答案 0 :(得分：1)

它可能与您嵌入的JotFormIFrame代码有关。

它的HTML现在在您的页面上显示如下：

<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotform.us/form/41198414446154" frameborder="0" style="width: 100%; height: 692px; border: none;" scrolling="no"></iframe>

据我所知，只要iframe加载，就会将页面滚动回顶部（无论URL中是否有id，都会发生这种情况，但如果没有，那么滚动到顶部不会做任何事情。）

我不知道为什么它不会在其他浏览器中做同样的事情;事件的时间可能有所不同，或者Firefox等可能不允许iframe滚动父窗口。

答案 1 :(得分：1)

这个iframe中有window.parent.scrollTo(0,0)，这似乎是罪魁祸首：

<iframe frameborder="0" scrolling="no" style="width: 100%; height: 0px; border: medium none;" src="http://form.jotform.us/form/41198414446154" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>

不确定为什么它只能在Chrome中为您执行此操作...对于所有浏览器都应如此。

此外，只是提醒您不要在问题中直接链接到您的网页。

相关问题
最新问题