-1
이 jQuery 코드는 IE8을 제외한 모든 브라우저에서 훌륭하게 작동합니다. IE8에서 페이지의 아무 곳이나 클릭하면 링크, div 또는 공백에 상관없이 스크롤 이벤트가 활성화됩니다. 나는 그것이 전파 문제라고 생각하고 jQuery의 특정 덩어리 (아래의 jQuery에있는 주석을 보라)에 쏟아 부었다.하지만 IE8에서 올바르게 작동하도록 변경하는 방법을 모르겠다. 선택한 요소를 클릭 할 때만 분명히 스크롤해야합니다.IE8 jQuery 전파 - 화면의 아무 곳이나 클릭하면 스크롤이 활성화됩니다.
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 내가 삭제 my previous answer에
<!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>
내 대답을 삭제했습니다. 그러나 사용중인 jQuery 버전을 구체적으로 나타내려면 OP를 편집하십시오. – Sparky
동일한 질문을 두 번 게시하지 마십시오. – Sparky