-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>スクリプトを実行するとあなたには、いくつかの警告が表示される場合があります。彼らは私がスクロールするためにJavascriptに渡す位置を私に与えるためにそこにあります。
ご迷惑をおかけして申し訳ありません。
ありがとう
開発のためのProのヒント：1. 'alert'ではなく' console.log'を使います。 2.コンソールを開きます。 3.後でありがとう:) –
私はそれをコンソールログに変更しましたが、それでも動作するように動作していません。 – MadeInDreams
私は問題がポジションの数学から来たと思う。 – MadeInDreams