This jQuery code works great on all browsers except IE8. What happens is that when I click anywhere on a page in IE8, whether on a link, a div or just in the white space, it will activate the scroll event. I think it is a propagation problem, and I have nailed it down to a specific chunk of jQuery (see comments in jQuery below), but I'm not sure how to change it so that it works correctly in IE8. It should obviously only scroll when the element chosen is clicked.
jQuery:
$(".scroll, .tobottom, .video-cta").on("click",function(e){
e.preventDefault();
var target = "#" + $(this).data("target") + " h1";
$("html, body").animate({
scrollTop: $(target).offset().top
}, {duration: 2000, easing: "easeInOutQuint"});
});
HTML
<!DOCTYPE html>
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Blah blah blah</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<style type="text/css">
/* Video */
.videocontent {width: 100%; max-width: 640px;}
.video-js {padding-top: 56.25%;}
.vjs-fullscreen {padding-top: 0px;}
</style>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56802153-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="gradient">
<div class="wrap">
<div class="logo">
<a class="top" href="index.html">Blah blah blah</a>
</div>
<div class="subheading">
<p><i>Blah blah blah</i></p>
<a class="tobottom" href="#" data-target="stayconnected" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Register for Updates']);">Register for updates</a>
</div>
</div>
</header>
<div class="pages">
<section class="deeper wrap">
<div class="heading-hr">
<h1>Blah blah blah</h1>
<hr>
</div>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<div class="heading-hr">
<h2>Are <b>you</b> ready?</h2>
<hr>
</div>
<div class="scroll with-heading" id="container-video" data-target="videoseries">
<p class="start-exploring">Start Exploring</p>
<div id="allArrows-video">
<img src="img/scroll/arrow1.png" id="arrow1-video" class="arrow-video" />
<img src="img/scroll/arrow2.png" id="arrow2-video" class="arrow-video" />
<img src="img/scroll/arrow3.png" id="arrow3-video" class="arrow-video" />
<img src="img/scroll/arrow4.png" id="arrow4-video" class="arrow-video" />
</div>
<div id="allBubbles-video">
<img src="img/scroll/bubble1.png" id="bubble1-video" class="bubble-video" />
<img src="img/scroll/bubble2.png" id="bubble2-video" class="bubble-video" />
<img src="img/scroll/bubble3.png" id="bubble3-video" class="bubble-video" />
<img src="img/scroll/bubble4.png" id="bubble4-video" class="bubble-video" />
<img src="img/scroll/bubble5.png" id="bubble5-video" class="bubble-video" />
</div>
<div>
</section>
<section id="videoseries" class="videoseries wrap">
<h1>Blah blah blah</h1>
<div class="video">
<div class="videocontent">
<video id="promo-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload width="auto" height="auto" poster="video/video-series/promo.jpg" data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="video/video-series/promo.mp4" type='video/mp4' />
<source src="video/video-series/promo.webm" type='video/webm' />
<source src="video/video-series/promo.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<script>
//reference the player
var myPlayer = videojs("promo-video");
//provide a name for the Events
var videoTitle = "Blah blah blah";
</script>
</div>
</div>
<div class="videodescription">
<h2>Blah blah blah</h2>
<p>Blah blah blah</p>
<a class="button video-cta" href="#" data-target="stayconnected" onClick="_gaq.push(['_trackEvent', 'Button', 'Home', 'Sign up to stay informed']);">Sign up to stay informed</a>
</div>
<div id="container-address" class="scroll" data-target="addresschallenges">
<div id="allArrows-address">
<img src="img/scroll/arrow1.png" id="arrow1-address" class="arrow-address" />
<img src="img/scroll/arrow2.png" id="arrow2-address" class="arrow-address" />
<img src="img/scroll/arrow3.png" id="arrow3-address" class="arrow-address" />
<img src="img/scroll/arrow4.png" id="arrow4-address" class="arrow-address" />
</div>
<div id="allBubbles-address">
<img src="img/scroll/bubble1.png" id="bubble1-address" class="bubble-address" />
<img src="img/scroll/bubble2.png" id="bubble2-address" class="bubble-address" />
<img src="img/scroll/bubble3.png" id="bubble3-address" class="bubble-address" />
<img src="img/scroll/bubble4.png" id="bubble4-address" class="bubble-address" />
<img src="img/scroll/bubble5.png" id="bubble5-address" class="bubble-address" />
</div>
<div>
</section>
<section id="addresschallenges" class="addresschallenges wrap">
<h1>Blah blah blah</h1>
<div class="challenges">
<div class="ie-left"><p>Blah blah blah</p></div>
<div class="ie-middle"><p>Blah blah blah</p></div>
<div class="ie-right"><p>Blah blah blah</p></div>
</div>
<div id="container-connected" class="scroll" data-target="stayconnected">
<div id="allArrows-connected">
<img src="img/scroll/arrow1.png" id="arrow1-connected" class="arrow-connected" />
<img src="img/scroll/arrow2.png" id="arrow2-connected" class="arrow-connected" />
<img src="img/scroll/arrow3.png" id="arrow3-connected" class="arrow-connected" />
<img src="img/scroll/arrow4.png" id="arrow4-connected" class="arrow-connected" />
</div>
<div id="allBubbles-connected">
<img src="img/scroll/bubble1.png" id="bubble1-connected" class="bubble-connected" />
<img src="img/scroll/bubble2.png" id="bubble2-connected" class="bubble-connected" />
<img src="img/scroll/bubble3.png" id="bubble3-connected" class="bubble-connected" />
<img src="img/scroll/bubble4.png" id="bubble4-connected" class="bubble-connected" />
<img src="img/scroll/bubble5.png" id="bubble5-connected" class="bubble-connected" />
</div>
<div>
</section>
<section id="stayconnected" class="stayconnected">
<h1>Stay <b>connected</b> to the latest news</h1>
<div class="form">
<div class="wrap">
<form class="cmxform" id="scForm" method="post" action="" pageId="4648716" siteId="147979" parentPageId="4648715">
<p class="join-us">Blah blah blah</p>
<div class="personal-info-test">
<div class="ie-left">
<div class="table-field">
<div class="first-row">
<div id="firstName-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span>
</div>
</div>
</div>
</div>
<div class="ie-middle">
<div class="table-field">
<div class="first-row">
<div id="lastName-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span>
</div>
</div>
</div>
</div>
<div class="ie-right">
<div class="table-field">
<div class="first-row">
<div id="email-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span>
</div>
</div>
</div>
</div>
</div>
<p class="required-fields">* Required fields</p>
<p class="agreement">Blah blah blah</p>
<input type="hidden" name="formSourceName" value="StandardForm">
<input type="hidden" name="sp_exp" value="yes">
<div class="submit-button"><input type="submit" value="Register for Updates" onClick="_gaq.push(['_trackEvent', 'Button', 'Register for Updates', 'Register for Updates']);"></div>
</form>
</div>
</div>
</section>
<section class="footer-home wrap">
<footer>
<p class="text-center"><img src="img/logo-blah-large.png" alt="Blah logo"></p>
<p>Blah blah blah</p>
<nav>
<ul>
<li><a href="tos.html" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Terms of Use']);">Terms of Use</a></li>
<li><a href="privacy.html" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Privacy Policy']);">Privacy Policy</a></li>
</ul>
</nav>
<p class="trademark">Blah blah blah</p>
<p>Blah blah blah</p>
</footer>
</section>
</div>
<div class="success-overlay"></div>
<div class="success-message">
<span>X</span>
<h1>Thank you for participating</h1>
<p>Blah blah blah</p>
</div>
<script src="js/main.min.js"></script>
<script src="jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>
<script src="jquery-validation-1.13.1/dist/additional-methods.js"></script>
<script>
$(document).ready(function() {
$.validator.addMethod("nonumbers", function(value, element, regexpr) {
return regexpr.test(value);
});
$.validator.addMethod("testemail", function(value, element, regexpr) {
return regexpr.test(value);
});
$("#scForm").validate({
debug: false,
errorPlacement: function(error, element) {
var errorid = "#" + $(error).attr("id");
var container = $(element).parent().parent().parent().find(errorid);
error.appendTo(container);
},
submitHandler: function(form) {
document.location.href = "index.html#stayconnected"
$(".success-overlay").show();
$(".success-message").show();
$(".success-message span").on("click",function(){
$(".success-overlay").hide();
$(".success-message").hide();
$("#firstName, #lastName, #email").val("");
});
form.submit();
},
rules: {
firstName: {
required: true,
minlength: 1,
nonumbers: /^[A-Za-z-]+$/
},
lastName: {
required: true,
minlength: 1,
nonumbers: /^[A-Za-z-]+$/
},
email: {
required: true,
email: true,
testemail: /^\w{2,}@\w{2,}\.\w{2,}$/
}
},
messages: {
firstName: {
required: "Please enter your first name",
minlength: "Please enter a valid first name",
nonumbers: "Only letters and dashes"
},
lastName: {
required: "Please enter your last name",
minlength: "Please enter a valid last name",
nonumbers: "Only letters and dashes"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address",
testemail: "Please enter a valid email address"
}
}
});
});
</script>
</body>
</html>