【发布时间】：2015-06-06 20:39:41
【问题描述】：
所以我编写了这个脚本来动画从登录页面的一个部分到另一个部分的滚动。 scrollPage 函数根据从第一个 jquery 方法传递的事件处理程序执行动画，该方法在导航栏中选择一个标签并根据 div 的 offset() 量确定滚动位置。第二种方法使用 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'});});
和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>
【问题讨论】：
标签： javascript jquery html firefox cross-browser