Question

I have links through out my site to divs on a page:

ONLY IN CHROME THIS HAPPENS:
My issue is whenever this link is used (even if you just paste it in your chrome browser) on initial page load the browser scrolls down to the link and back up to the top of the page. This is driving me nuts I cannot figure out the problem, (i know my source code isn't the prettiest).

I couldn't find this topic/issue anywehere, but please point to a dup if one exists.

Here is some sample code from the page:

<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>
Était-ce utile?

La solution

It may have to do with the JotFormIFrame code that you have embedded.

The HTML for it looks like this right now, on your page:

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

And as far as I can tell, that will scroll the page back to the top as soon as the iframe has loaded (this will happen whether there is an id in the URL or not, although if there isn't, then scrolling to the top doesn't do anything).

I don't know why it wouldn't do the same thing in other browsers; there may be a difference in the timing of events, or it may be that Firefox, etc, don't allow the iframe to scroll the parent window.

Autres conseils

There is a window.parent.scrollTo(0,0) in this iframe, which seems to be the culprit:

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

Not sure why it's only doing this in Chrome for you... this should be the case for all browsers.

Also, just a reminder not to link directly to your page in your question.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top