Javascript 滚动整页

下面是我编写的一段不使用fullpage.js的代码 我想将其更改为scrollTop，而不是position relative和“top”：-\ index（）*100+“%”，带溢出：hidden

请告诉我怎么做。我附加了顶部菜单（标题bg）和搜索包装

JQuery：

 $(document).ready(function() {
        onLoad();
        NavAnimation();
        DesktopResize();
        $("body").css({
          overflow: 'hidden'
        });

        /*$(window).bind('scroll', function() {
             if ($(window).scrollTop() > 726) {
                 $('.search-wrapper').addClass('fixed');
             }
             else {
                 $('.search-wrapper').removeClass('fixed');
             }
        }); */  
      });

      function DesktopResize(){
        $(".section, .fullpage, html, body").css({
          height: '100%',
          width: '100%'
        });
      }

function NavAnimation(){
    scroll.call(active, true);
  }

  var active = null;
  function scroll(silent){
    var _;
    if (active === null) {
      _ = $(".section").first();
    } else {
      active.removeClass("active");
      _ = $(this);
    }
    if (_.length === 0) return;
    if (active !== null || silent === false) {
      $(".fullpage").animate({"top": -_.index() * 100 + "%"}, 1000);
    }
    active = _;

  }

  function onLoad() {
      $(".navigation li").click(scroll);
      scroll();
  }

  var wheel = true;
window.addEventListener('wheel', function(event) {
  if (wheel) {
    wheel = false;
    if (event.deltaY > 0) {
      scroll.call(active.next());
    } else {
      scroll.call(active.prev());
    }
    setTimeout(function () {
      wheel = true;
    }, 1000)
  }
});
window.addEventListener('mousewheel', function(event) {
  if (wheel) {
    wheel = false;
    if (event.wheelDelta < 0) {
      scroll.call(active.next());
    } else {
      scroll.call(active.prev());
    }
    setTimeout(function () {
      wheel = true;
    }, 1000)
  }
});

---

好的，仍然不确定您到底想要什么，但请看这里：

$(document).ready(function () {

    $(".navigation li").click(function () {
        activeSection = $(this).index();
        scrollMeToSection();
    });
    var activeSection = 0;
    var wheel = true;

    function scrollMeToSection() {
        $('body').animate({
            scrollTop: ($(window).height() * activeSection)
        }, '1000', 'swing', function () {
            // can do something when finishes animating here.
        });
    }

    $(window).on('mousewheel DOMMouseScroll', function (event) {
        console.log(event);
        event.preventDefault();
        event.stopPropagation();
        if (wheel) {
            wheel = false;
            var goingUp = event.originalEvent.deltaY > 0 ? false : true;
            if (activeSection === 0 && goingUp) {
                wheel = true;
                return;
            }
            activeSection = goingUp ? (activeSection - 1) : (activeSection + 1);
            if (activeSection == $('.section').length) {
                activeSection = $('.section').length - 1;
            }
            scrollMeToSection();
            setTimeout(function () {
                wheel = true;
            }, 1000);
        }
    });

});

演示：

---

这适用于鼠标滚轮滚动，但不适用于滚动条滚动（这是一个比较复杂的管理过程）。

所以您想使用

scrollTop

而不是动画top？@Spokey，是的。设置scrollTop动画并移除隐藏的溢出。但是，如果删除溢出，则滚动（滚轮、鼠标滚轮）功能无法正常工作。JSFIDLE会有所帮助lots@user2808054. 添加到问题的顶部。期望的结果是什么？很好。这就是我需要的。我可以写信给你寻求帮助吗？很高兴这是你想要的。给我写信？哪里什么样的帮助！？你可以在我的网站上找到我。只是谷歌。正在尝试修复Safari和IE 9-10+中的滚动：（很抱歉听到这个消息，欢迎来到跨浏览器兼容性的世界：-（我遇到了一个问题。我有不同的块。第二个块的高度比第三个块大，浏览器滚动窗口的高度为半秒。如何避免这种情况？

    html, body {
    background: #d8e6e3;
    position: relative;
    }

.section{
    height: 100% !important;
    width: 100%;
}

.header-bg{
  background: #242928;
  color: #879996;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 500;
}

.header-bg .header-content{
  max-width: 1800px;
  margin: 0 auto;
  font-family: "HelveticaNeue-roman";
  text-transform: uppercase;
}

.header-content .login{
  background: url("../image/login-ico.png") no-repeat;
  background-position: 0 0;
  height: 15px;
  width: auto;
  padding: 0px 0 0 35px;
  margin: 25px 0 0 30px;
  float: left;
  cursor: pointer;
}

.header-content .navigation{
  margin: 0 auto;
  max-width: 486px;
}
 .header-content .navigation ul{
  list-style-type: none;
  font-size: 0;
}

.header-content .navigation ul li{
  display: inline-block;
  font-size: 14px;
  padding: 25px 25px 25px 25px;
  cursor: pointer;
}

.fullpage{
  position: relative;
}

.section{
  padding: 66px 0 0 0;
  margin: 0 auto;
  max-width: 1800px;
}

.section .header-image{
  position: relative;
}

.section .header-image .header-bg-image{
  width: 100%;
  height: 659px;
  background: url("../image/head-1.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.section .header-image .main-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -120px;
}

.section .search-wrapper{
  font-size: 0;
  position: relative;
}

.search-wrapper .explain,
.search-wrapper .input,
.search-wrapper .button{
  display: inline-block;
  vertical-align: top;
}

.search-wrapper .explain{
  padding: 26px 0 22px 24px;
  font-family: "HelveticaNeue-roman";
  font-size: 14px;
  line-height: 16px;
  color: #586664;
  text-transform: uppercase;
  background: #fffce5;
  width: calc(20% - 24px);
}

.search-wrapper .input{
  width: 60%;
  font-size: 14px;
}

.search-wrapper .input input{
  border: none;
  padding: 26px 0 11px 26px;
  font-size: 36px;
  line-height: 36px;
  color: #bcccc9;
  width: calc(100% - 26px);
  font-family: "HelveticaNeue-thin";
}

.search-wrapper .button{
  width: 20%;
  height: 100%;
  font-size: 14px;
  font-family: "HelveticaNeue-roman";
}

.search-wrapper .button .search{
  font-family: "HelveticaNeue-roman";
  font-size: 32px;
  line-height: 32px;
  color: #fff;
  background: #ff4255;
  width: 100%;
  height: 80px;
  border: none;
  cursor: pointer;
  outline: none;
}

$(document).ready(function () {

    $(".navigation li").click(function () {
        activeSection = $(this).index();
        scrollMeToSection();
    });
    var activeSection = 0;
    var wheel = true;

    function scrollMeToSection() {
        $('body').animate({
            scrollTop: ($(window).height() * activeSection)
        }, '1000', 'swing', function () {
            // can do something when finishes animating here.
        });
    }

    $(window).on('mousewheel DOMMouseScroll', function (event) {
        console.log(event);
        event.preventDefault();
        event.stopPropagation();
        if (wheel) {
            wheel = false;
            var goingUp = event.originalEvent.deltaY > 0 ? false : true;
            if (activeSection === 0 && goingUp) {
                wheel = true;
                return;
            }
            activeSection = goingUp ? (activeSection - 1) : (activeSection + 1);
            if (activeSection == $('.section').length) {
                activeSection = $('.section').length - 1;
            }
            scrollMeToSection();
            setTimeout(function () {
                wheel = true;
            }, 1000);
        }
    });

});