제이쿼리 크롬에서 인식이 안되는 문제 입니다. ㅠㅠ
본문
안녕하세요 더운날씨에 글을 클릭해 주셔서 감사드립니다.
제이쿼리나 홈페이지 제작 하는게 초보이다 보니 ㅠㅠ 모르는게 많아서 이렇게 질문을 올리게 되었습니다.
다른게 아니고 원페이지 스타일의 height 100% 짜리 div를 여러개 만들어서 display:block 으로 쌓아놓고
책갈피를 하나씩 꽂아서 제이쿼리로 부드럽게 이동하는 그런 소스를 만들고 싶어서요 .. 여기저기 퍼다가
해보았는데 .. 이것이 익스플로어(10) 에서는 정상적을 작동을 합니만, 크롬에서는 이상하게 작동을 하지 않네요
소스 입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>무제 문서</title>
< script type="text/javascript" src="/t/js/jquery-1.4.4.min.js"></script>
< script type="text/javascript">
$(document).ready(function() {
$("a.first").anchorAnimate()
$("a.second").anchorAnimate()
$("a.third").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 500
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
</script>
<style>
body , html {
background-color:#f12;
overflow:hidden;
margin:0;
color:#fff;
position:absolute;
width:100%;
height:100%;
}
.q1 {
width:100%;
height:100%;
position:relative;
overflow-y:scroll;
background-color:#f90;
}
.q2 {
width:100%;
height:100%;
min-height:100%;
position:relative;
overflow:hidden;
background-color:#000;
}
.q3 {
width:100%;
height:100%;
position:relative;
overflow:hidden;
background-color:#C6C;
}
.q4 {
width:100%;
height:100%;
position:relative;
overflow:hidden;
background-color:#3F6;
}
< /style>
< /head>
<body>
< a name="tab1" id="first">
< div class="q1"><a href="#second" class="first">abc</a></div>
< /a>
< a name="tab2" id="second">
< div class="q2"><a href="#third" class="second"> lkkkkkkkkkkkkk</a></div>
< /a>
< a name="tab3" id="third">
< div class="q3"><a href="#first" class="third"> lkkkkkkkkkkkkk</a></div>
< /a>
< /body>
< /html>
--------------------------------------------------------------------------------------------------------------------------------
정확하진 않습니다만 , 제가 구글링을 해본결과 scrolltop 이라는 게 크롬에서는 인식이 안된다는 거 같은데
어떻게 수정을 하여야 크롬과 익스 둘다 사용할수 있는지를 모르겠습니다.
혹시 아시는 고수님들 제게 팁좀 주시면 감사하겠습니다.
글 읽어 주셔서 감사드리며 더운날씨에 화이팅하세요~
답변 1
스크롤 관련 jquery를
자바스크립트 소스로 짜면 둘다 인식됩니다.
자바스크립트 소스로 짜면 둘다 인식됩니다.
야레야렐님 답변감사드립니다. 허나 제이쿼리를 자바스크립트 소스로 짠다는게 어떤의미인지 조금더 구체적으로 설설명해주실수 있을까요? ㅠㅠ초보라서 잘몰라요 ㅠㅠ 답변감사합니다
답변을 작성하시기 전에 로그인 해주세요.
