jQuery页面滚动在Firefox中可用，但不适用于Chrome或Safari

因此，我编写了此脚本，将动画从着陆页的一部分滚动到另一部分。 scrollPage函数根据从第一个jquery方法传递的事件处理函数执行动画，该方法在导航栏中选择一个标记并根据div的offset（）量确定滚动位置。第二种方法使用hashchange事件来滚动页面，这会修复后退按钮（如果按下）。它工作正常，除了在Chrome和Safari浏览器中，问题是当你点击#home标签，这是第一部分的链接，页面不滚动或去那个位置，它不会做任何事情。如果它工作。我有下面的代码，任何帮助表示赞赏，欢呼声。jQuery页面滚动在Firefox中可用，但不适用于Chrome或Safari

$(function(){ 

    var win = $(window), 
     page = $('body, html'), 
     nav = $('nav'), 
     section = $('.section'), 
     logo = $(".image-div-size"), 
     topScreen = $('.topScreen, .navbar-brand.head-logo'), 
     homeTextDiv = $('.landing-page-text'), 
     homeText = $('.landing-page-text p'), 
     homeButton = "<br/><div class='buttonFindOut'><a href='#about'>Find out more</a></div>", 
     innerText = "Welcome to Squiggle"; 


    function scrollPage(href, scrollAmount, updateHash){ 
     if(page.scrollTop() !== scrollAmount){ 
      page.animate({ 
       scrollTop: scrollAmount 
      }, 500, "easeInOutExpo", function(){ 
       if(updateHash){document.location.hash = href;} 
      }); 
     } 
    } 

    nav.on('click', 'a', function(e){ 

     e.preventDefault(); 

     var href = $(this).attr('href'), 
      target = $(href), 
      targetOffset = target.offset().top; 

     scrollPage(href, targetOffset, true); 
     console.log(href, target, targetOffset); 
    }); 

    win.on('hashchange', function(){ 

     var href = document.location.hash; 

      if(!href){ 
       var targetOffset = 0; 
      }else { 
       var target = $(href); 
       var targetOffset = target.offset().top; 
      } 

     scrollPage(href, targetOffset, false); 
    }); 

    homeText.fadeIn(1500, 'easeInOutExpo', function(){ 
     homeText.delay(1000).fadeOut(1500, 'easeInOutExpo', function(){ 
      homeText.text(innerText).fadeIn(1500, 'easeInOutExpo', function(){ 
       $(homeButton).hide().appendTo(homeTextDiv).fadeIn(1500, 'easeInOutExpo'); 
      }); 
     }); 
    }); 

    logo.slideDown({'duration': 500, 'easing':'easeOutBack', 'direction': 'up'});});

和HTML：

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 

     <link rel="stylesheet" href="css/normalize.css"> 
     <script src="js/vendor/modernizr-2.8.3.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> 

     <link rel="stylesheet" href="css/main.css"> 


    </head> 
    <body> 
    <div class="site-wrapper"> 

    <div class="container-full"> 

     <div class="inner-container"> 
      <nav class="navbar navbar-inverse nav-main"> 
       <div class="navbar-header"> 
        <a class="navbar-brand head-logo" href="#home"> 
        <img alt="Brand-logo" src="img/logo.png" class="logo-small"> 
        </a> 
       </div> 

       <ul class="nav navbar-nav navbar-float-right"> 
        <li><a class="topScreen" href="#home">top</a></li> 
        <li><a href="#about">about</a></li> 
        <li><a href="#functions">functions</a></li> 
        <li><a href="#contact">contact</a></li> 
       </ul> 
      </nav> 
     </div> 

     <div class="section cover-container" id="home"> 

      <div class="content-main"> 
       <div class="image-div"> 
        <img src="img/iphone_6.png" alt="squiggle on iOS" class="image-div-size"> 
       </div> 

       <!-- <div class="page-header home-text"> 
        <h1 class="text-center">Connect to your customers instantly</h1> 
        <p class="text-center"><small>Imagine a way to connect 
        to your customers like never before. 
        Now it's possible</small> 
        <button class="btn btn-danger">welcome to the Squiggle App</button></p> 

       </div> --> 
       <div class="col-md-4"> 

       </div> 
       <div class='col-md-8 landing-page-text'> 
        <p>Collect customer data<br /> 
        like never before.<br /></p> 
       </div> 

      </div> 

     </div> 

     <div class="section about" id="about"> 
      dsdsdsdsd 
     </div> 

     <div class="section functions" id="functions"> 
      dsdsdsdsd 
     </div> 

     <div class="section contact" id="contact"> 
      dsdsdsdsd 
     </div> 

    </div> 
    </div> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 

     <!-- Add your site or application content here --> 
     <nav></nav> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
     <script src="js/plugins.js"></script> 
     <script src="js/main.js"></script> 

     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
     <script> 
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
      e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
      e.src='//www.google-analytics.com/analytics.js'; 
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
      ga('create','UA-XXXXX-X','auto');ga('send','pageview'); 
     </script> 
    </body> 
</html>

来源

2015-04-02 Xochi

尝试使用（上述2版）最新的jQuery

来源

2015-04-02 01:46:09 Vishnuvathsan

这使脚本停止工作 – Xochi 2015-04-02 01:59:10

你改变所有的jQuery源匹配相同的版本？它适用于不同的场景。 – Vishnuvathsan 2015-04-02 03:03:48

jQuery页面滚动在Firefox中可用，但不适用于Chrome或Safari

回答

相关问题