Warum funktioniert die Funktion zum Blättern auf der Seite nicht wie erwartet?

Question

Ich arbeite an einer Website, die von unten nach oben scrollen muss. Wenn die Seite geladen wird, wird das Ende des Dokuments angezeigt. Es ist eine Art umgekehrtes Scrollen.

Das Menü ist unten fixiert. Wenn ich auf einen Link im Menü klicke, benutze ich Jquery animate, um zu dem Element zu blättern, das ich sehen möchte. Es funktioniert, aber für einige reson, wenn ich auf den gleichen Link oder einen anderen Link klicke, wird es wieder nach unten gehen, als ob es die Animation umschalten würde, anstatt an die angegebene Position zu gehen.

Hier ist mein Code.

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>

Wenn Sie das Skript ausführen Sie einige Warnungen sehen könnte. Sie sind da, um mir die Position zu geben, dass ich zum Scrollen Javascript übergebe.

Jede Hilfe wäre zu schätzen!

Vielen Dank

Answer 1

versuchen Sie dies. Für mich geht das. Cooles Projekt, das du hast.

Sie können die Entfernung zu einem Element mit element.getBoundingClientRect() ermitteln. Alles, was Sie brauchen, ist ein Bildlauf um einen Pixelbetrag, der dieser Entfernung entspricht. Und vergessen Sie nicht, die neue Position zu aktualisieren. Im Folgenden finden Sie eine Überarbeitung für Ihren Click-Ereignishandler.

 var previous_element_pos = null; 

     //menu click events 
     $(document).on("click", ".menulink", function (event) { 

     //get selected panel id 
     var link_id = ($(this).attr("id")); 
     var $container = link_id + "_panel"; 

     //get distance to the selected panel 
     var scrollDistance = document.getElementById($container).getBoundingClientRect().top; 

     //scroll to new position 
     $('html, body').animate({ 
      scrollTop: (scrollDistance + previous_element_pos) * -1 
     }, 5000); 

     //update previous position 
     previous_element_pos = scrollDistance + previous_element_pos; 

    });