Javascript jQuery页面滚动可以在Firefox中使用，但不能在Chrome或Safari中使用
所以我写了这个脚本来设置从一个登录页的一个部分到另一个部分的滚动动画。scrollPage函数根据从第一个jquery方法传递的事件处理程序执行动画，该方法在导航栏中选择一个标记，并根据div的偏移量确定滚动位置。第二个方法使用hashchange事件滚动页面，如果按下返回按钮，将修复返回按钮。它工作正常，除了在chrome和safari中，问题是当您单击home a标记（指向第一部分的链接）时，页面不会滚动或转到该位置，它不会做任何事情。在ff中，它起作用。我有下面的代码。谢谢你的帮助，干杯Javascript jQuery页面滚动可以在Firefox中使用，但不能在Chrome或Safari中使用,javascript,jquery,html,firefox,cross-browser,Javascript,Jquery,Html,Firefox,Cross Browser,所以我写了这个脚本来设置从一个登录页的一个部分到另一个部分的滚动动画。scrollPage函数根据从第一个jquery方法传递的事件处理程序执行动画，该方法在导航栏中选择一个标记，并根据div的偏移量确定滚动位置。第二个方法使用hashchange事件滚动页面，如果按下返回按钮，将修复返回按钮。它工作正常，除了在chrome和safari中，问题是当您单击home a标记（指向第一部分的链接）时，页面不会滚动或转到该位置，它不会做任何事情。在ff中，它起作用。我有下面的代码。谢谢你的帮助，干杯
$(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'});});
<!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>
尝试使用上面最新的jQuery版本2是否更改了所有jQuery源以匹配同一版本？这在另一种情况下对我有效。