jQuery page scroll works in Firefox but not Chrome or Safari

Question

So i wrote this script to animate scrolling from one section of a landing page to another. The scrollPage function does the animation based on event handlers passed from the first jquery method which selects a tags in the navbar and determines the scroll position based on the offset() amount of the div. The second method uses a hashchange event to scroll the page, this fixes the back button if it is pressed. It works fine except that in chrome and safari, the issue is that when you click the #home a tag, which is the link to the first section, the page does not scroll or go to that location, it doesn't do anything. In ff it works. I have the code below any help is appreciated, cheers.

$(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'});});

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

Answer 1

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

jQuery page scroll works in Firefox but not Chrome or Safari

Question

1 answers

solution1
0 2015-04-02 01:46:09

jQuery page scroll works in Firefox but not Chrome or Safari

Question

1 answers

solution1 0 2015-04-02 01:46:09

solution1
0 2015-04-02 01:46:09