为什么我的页面滚动功能没有按预期工作？

Question

我正在处理一个必须从底部滚动到顶部的网站。所以当页面加载时，它显示文档的结尾。这是一种反向滚动。

菜单固定在底部。当我在菜单中单击 link 时，我使用 Jquery 动画滚动到我想查看的元素。它正在工作，但如果我单击相同的 link 或另一个 link，它会回到底部，就像它正在切换动画而不是转到给定的位置。

这是我的代码。

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 进行滚动的位置。

如有任何帮助，我们将不胜感激！

谢谢

Answer 1

试试这个。这个对我有用。你有很棒的项目。

您可以使用 element.getBoundingClientRect() 获取到元素的距离。您所需要的只是滚动等于该距离的像素数量。并且不要忘记更新新位置。以下是您的点击事件处理程序的返工。

       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;

    });

为什么我的页面滚动功能没有按预期工作？

Why doesn't my page scroll function work as expected?

html

javascript

jquery

scroll

jquery-animate