我的JavaScript平滑滾動無法滾動到Firefox中的正確位置，有人知道我在做什么錯嗎？

Question

我正在建立一個單頁網站，並且需要導航鏈接才能平滑滾動到該網站的不同頁面或部分。 我正在使用的javascript在Chrome和Safari中完美運行，但是在FireFox中，它無法滾動到正確的位置。 我所有的錨點都在html中，但這是我正在使用的javascript。 Firefox兼容性我缺少什么嗎？

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

嘗試這個：

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

適用於錨等

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

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

DEMO

Answer 2

它是這樣工作的！ 使用這種方式：

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