我的JavaScript平滑滚动无法滚动到Firefox中的正确位置，有人知道我在做什么错吗？

Question

I have a single page website I'm building, and I need my nav links to smooth scroll to the different pages or sections of the site. The javascript I'm using works perfectly in Chrome and Safari, but in FireFox, it doesn't scroll to the right spot. I have all my anchor points in the html, but here is the javascript I am using. Is there something I am missing for Firefox compatibility?

<!-- SMOOTH SCROLL -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
                $(".contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
            });
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           var d = document.createElement("div");
        d.style.height = "101%";
        d.style.overflow = "hidden";
        document.body.appendChild(d);
        window.scrollTo(0,scrollToM);
        setTimeout(function() {
        d.parentNode.removeChild(d);
            }, 10);
           return false;
         });
      }
    }
  });
});

Answer 1

Try this:

$(".anchor").click(function(e) {
    e.preventDefault();
    anchor = $(this).attr('href');
    $("html, body").animate({
      'scrollTop':   $(anchor).offset().top
    }, 1000);
});

works for anchors like

<a class="anchor" href="#div1">click</a>

<div id="div1">texttext</div>

DEMO

Answer 2

It works this way! Use this way:

 $(document).ready(function(){ $(".contactLink").click(function(){ if ($("#contactForm").is(":hidden")){ $("#contactForm").slideDown("slow"); } else{ $("#contactForm").slideUp("slow"); } }); }); function closeForm(){ $("#messageSent").show("slow"); setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000); } $(document).ready(function() { function filterPath(string) { return string .replace(/^\\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\\/$/,''); } $('a[href*=#]').each(function() { if ( filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/,'') ) { var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; if ($target) { var targetOffset = $target.offset().top; $(this).click(function() { $('html, body').animate({scrollTop: targetOffset}, 1000); var d = document.createElement("div"); d.style.height = "101%"; d.style.overflow = "hidden"; document.body.appendChild(d); window.scrollTo(0,scrollToM); setTimeout(function() { d.parentNode.removeChild(d); }, 10); return false; }); } } }); }); 

 * {font-family: Segoe UI} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h2 id="contents">Contents</h2> <a href="#intro">Intro</a> <a href="#history">History</a> <a href="#geo">Geo</a> <a href="#maths">Maths</a> <a href="#biology">Biology</a> <h2 id="intro">Intro</h2> <p>Chrome OS is an operating system based on the Linux kernel and designed by Google to work with web applications and installed applications. Initially, Chrome OS was almost a pure web thin client operating system, with only a handful of "native" applications, but Google gradually began encouraging developers to create "packaged applications", some of which can work offline. In 2014, Google upgraded its Play Store standards for packaged applications, requiring that these applications work offline. Around the same time, Google also announced that Chrome OS would gain the ability to run Android applications natively, by late 2014. In September 2014, App Runtime for Chrome (beta) was launched together with four Android applications being able to run on Chrome OS.</p> <p>Chrome OS is built upon the open source project called Chromium OS which, unlike Chrome OS, can be compiled from the downloaded source code. Chrome OS is the commercial version installed on specific hardware from Google's manufacturing partners. The launch date for retail hardware featuring Chrome OS was delayed from late 2010 to June 15, 2011, when "Chromebooks" from Samsung, and then Acer shipped in July.</p> <h2 id="history">History</h2> <p>Google announced Chrome OS on July 7, 2009, describing it as an operating system in which both applications and user data reside in the cloud. To ascertain marketing requirements, the company relied on informal metrics, including monitoring the usage patterns of some 200 Chrome OS machines used by Google employees. Developers also noted their own usage patterns. Matthew Papakipos, former engineering director for the Chrome OS project, put three machines in his house and found himself logging in for brief sessions: to make a single search query or send a short email.</p> <h2 id="geo">Geo</h2> <p>On November 19, 2009, Google released Chrome OS's source code as the Chromium OS project. As with other open source projects, developers can modify the code from Chromium OS and build their own versions, whereas Chrome OS code is only supported by Google and its partners and only runs on hardware designed for the purpose. Unlike Chromium OS, Chrome OS is automatically updated to the latest version.</p> <h2 id="maths">Maths</h2> <p>At a November 19, 2009 news conference, Sundar Pichai, the Google vice president overseeing Chrome, demonstrated an early version of the operating system. He previewed a desktop which looked very similar to the Chrome browser, and, in addition to the regular browser tabs, also had application tabs, which take less space and can be pinned for easier access. At the conference, the operating system booted up in seven seconds, a time Google said it would work to reduce.</p> <h2 id="science">Science</h2> <p>Also on November 19, 2009, Chris Kenyon, vice president of OEM services at Canonical Ltd, announced that Canonical was under contract to contribute engineering resources to the project with the intent to build on existing open source components and tools where feasible.</p> <h2 id="biology">Biology</h2> <p>By February 2010, Google switched its development Linux distribution for Chrome from Ubuntu to Gentoo Linux in order to use that distribution's Portage package management system, which, according to sources at Google, is used with "Google's own take on the vanilla Linux kernel".</p>