javascript - 使用 jquery 或 javascript 滚动到特定位置?

标签 javascript jquery html css

我不太确定如何用语言来描述它;但我打算做的是这个网站取得的成就:http://sapia.com.pe/

当您向下滚动时,它会将您带到页面的特定位置,当您向上滚动时也是如此。我怎么能用 Jquery 做到这一点?是否需要任何插件?

最佳答案

查看下面的SNIPPET,它会让您了解如何实现它的基本概念

或者您可以使用像 fullpage 这样的插件

var arr = ['_a','_b','_c'];
var i=0;
var doing=false;
$(window).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            if(i==-1) i=2;
            if(!doing){
             $('html, body').animate({
                  scrollTop: $("#"+arr[i--]).offset().top
              }, 600,function(){doing=false;});
             doing=true;
           }
        }
        else{
             if(i==3) i=0;
            if(!doing){
             $('html, body').animate({
                  scrollTop: $("#"+arr[i++]).offset().top
              }, 600,function(){doing=false;});
             doing=true;
           }
        }
 });
body{
    overflow: hidden;
}
.section,html,body{
  width:100%;
  height:100%;
}
.a{ background-color:red; }
.b{ background-color:yellow; }
.c{ background-color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="_a" class="section a"></div>
<div id="_b" class="section b"></div>
<div id="_c" class="section c"></div>

关于javascript - 使用 jquery 或 javascript 滚动到特定位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44288557/

相关文章:

javascript - Ionic4:搜索栏结果未按预期工作

javascript - 非常奇怪的 jQuery/AJAX 行为

jquery - 使元素在其父元素中居中

javascript - Jquery Mobile Datepicker 在滑动时更改月份

html - Bootstrap Carousel 图像过渡幻灯片不起作用

javascript - 检查 CSS 线性渐变支持

javascript - Node JS session 错误 : express-session deprecated

javascript - 剑道网格自定义排序

javascript - 类型错误 : "ctx.cart is undefined"

javascript - 在网站中嵌入 Google 日历并使用日历中的事件