-1
아래에서 위로 스크롤해야하는 웹 사이트를 운영하고 있습니다. 그래서 페이지가로드되면 문서의 끝을 보여줍니다. 그것의 일종의 역 스크롤.내 페이지 스크롤 기능이 예상대로 작동하지 않는 이유는 무엇입니까?
메뉴는 하단에 고정되어 있습니다. 메뉴에서 링크를 클릭하면 Jquery 애니메이션을 사용하여보고 싶은 요소로 스크롤합니다. 그것은 작동하지만 일부 링크를 클릭하면 동일한 링크 나 다른 링크를 클릭하면 주어진 위치로 이동하는 대신 애니메이션을 토글하는 것처럼 맨 아래로 되돌아갑니다.
여기 내 코드입니다.
var winHeight = $(window).innerHeight();
$(document).ready(function() {
$(".panel").height(winHeight);
$("body").height(winHeight*$(".panel").length);
});
window.addEventListener('resize', function (event) {
$(".panel").height($(window).innerHeight());
});
$(window).on('scroll',function(){
$(".panelCon").css('bottom',$(window).scrollTop()*-1);
});
var previous_element_pos = null ;
$(document).on("click", ".menulink", function (event) {
var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
console.log("Previous element position :" + previous_element_pos);
event.preventDefault(event);
var window_height = $(window).height();
var window_top_position = $(window).scrollTop();
var window_bottom_position = (window_top_position + window_height);
var link_id = ($(this).attr("id"));
var $container = $("#"+link_id+"_panel");
var container_height = $container.outerHeight();
var container_top_position = $container.offset().top;
var container_bottom_position = (container_top_position + container_height);
console.log("Original position from the view :" + container_top_position);
if ((container_bottom_position >= window_top_position) &&
(container_top_position <= window_bottom_position)) {
console.log('in view');
console.log("Container top pos. :" + container_top_position);
}
else if(container_top_position < 0) {
console.log("Pos. is negative :" + $($container).offset().top*-1);
$('html, body').animate({
scrollTop:$($container).offset().top*-1
}, 5000);
previous_element_pos = $($container).offset().top*-1
}
else if(container_top_position > 0) {
console.log("Pos. is positive :" + ($($container).offset().top)*1);
$('html, body').animate({
scrollTop: ($($container).offset().top - previous_element_pos)*1
}, 5000);
previous_element_pos = $($container).offset().top*1
}
});/* FOR LOADING SCREEN IMAGE*/
.mainImg{
position:relative;
height:100%;
background-image:url('../images/mainImg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* FOR NAVBAR BOOTSTRAP ROUDED BORDER REMOVAL*/
.navbar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/* FOR NAVBAR AFFIX*/
.affix {
bottom: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
/* FOR ROUTES BLOCK DISPLAY*/
.routes-block{
border: 1px solid #000;
width : 200px;
height : 400px;
display: inline-block;
margin:5px;
}
.menulink{
font-family: arial;
}
body {
background-color: #111318;
margin: 0;
padding: 0;
}
.panelCon{
position: fixed;
bottom: 0;
left:0;
width: 100%;
}
.panel {
width: 100%;
background-color: #111318;
}
.panel h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ROUTESRATEx</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../JS/route_app.js"></script>
</head>
<body>
<div class="panelCon">
<div id="contact_panel" class="panel">
<h1>CONTACT</h1>
</div>
<div id="media_panel"class="panel">
<h1>MEDIA</h1>
</div>
<div id="store_panel"class="panel">
<h1>STORE</h1>
</div>
<div id="routes_panel" class="panel">
<h1>ROUTES</h1>
</div>
<div id="routesrate_panel" class="panel">
<h1>INDEX</h1>
</div>
</div>
<nav id="nav" class="navbar navbar-inverse navbar-fixed-bottom" data-spy="affix" data-offset-top="0">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ROUTERATES</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a id = "routesrate" href="#">ROUTESRATE</a></li>
<li><a id = "routes" class="menulink" data-container="main" href="#">ROUTES</a></li>
<li><a id = "store" class="menulink" href="#">STORE</a></li>
<li><a id = "media" class="menulink" href="#">MEDIA</a></li>
<li><a id = "contact" class="menulink" href="#">CONTACT</a></li>
</ul>
</div>
</nav>
</body>
</html>도움이 필요하십니까?
감사합니다.
개발을위한 Pro tip : 1.'alert' 대신'console.log'를 사용하십시오. 2. 콘솔을 엽니 다. 3. 나중에 고마워. :) –
콘솔 로그로 바꿨지만 그래도 작동하지 않는 것은 여전히 작동하지 않는다. – MadeInDreams
나는 문제가 위치에 대한 수학에서 나온 것이라고 생각한다. – MadeInDreams