Jquery 滚动功能不应滚动到顶部_Jquery_Scroll

Jquery 滚动功能不应滚动到顶部

jquery scroll

Jquery 滚动功能不应滚动到顶部,jquery,scroll,Jquery,Scroll,我在我的onepage上有这个脚本，它运行得很好。但我需要的脚本不能滚动到第一节课可能吗 $(document).ready(function () { var divs = $('.section'); var dir = 'up'; // wheel scroll direction var div = 0; // current div $(document.body).on('DOMMouseScroll mousewheel', function (e) { if (e.or

我在我的onepage上有这个脚本，它运行得很好。但我需要的脚本不能滚动到第一节课

可能吗

$(document).ready(function () {
var divs = $('.section');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
    if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
        dir = 'down';
    } else {
        dir = 'up';
    }
    // find currently visible div :
    div = -1;
    divs.each(function(i){
        if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
            div = i;
        }
    });
    if (dir == 'up' && div > 0) {
        div--;
    }
    if (dir == 'down' && div < divs.length) {
        div++;
    }
    //console.log(div, dir, divs.length);
    $('html,body').stop().animate({
        scrollTop: divs.eq(div).offset().top
    }, 1300);
    return false;
});
$(window).resize(function () {
    $('html,body').scrollTop(divs.eq(div).offset().top);
});

$（文档）.ready（函数（）{
var divs=$（“.section”）；
var dir='up'；//滚轮滚动方向
var div=0；//当前div
$（document.body）.on（'DOMMouseScroll mousewheel'，函数（e）{
如果（e.originalEvent.detail>0 | | e.originalEvent.wheelDelta<0）{
dir='down'；
}否则{
dir='up'；
}
//查找当前可见的div:
div=-1；
每个分区（功能（i）{
if（div=$（window.scrollTop（））{
div=i；
}
});
if（dir=='up'&&div>0）{
分区--；
}
if（dir=='down'&&div


}))
 您可以在jquery中使用：first
选择器
例如
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first demo</title>
  <style>
  td {
    color: blue;
    font-weight: bold;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<table>
  <tr class='nn'><td>Row 1</td></tr>
  <tr class='nn'><td>Row 2</td></tr>
  <tr class='nn'><td>Row 3</td></tr>
</table>

<script>
$( ".nn:first" ).css( "font-style", "italic" );
</script>

</body>
</html


第一次演示
运输署{
颜色：蓝色；
字体大小：粗体；
}
一排
第2排
第3排
$（.nn:first”）.css（“字体样式”、“斜体”）；
也许你可以使用这个方便的工具来简化代码
下面是另一种方法：
HTML
<div class="page green">
    page 1
</div>
<div class="page orange">
    page 2
</div>
<div class="page blue">
    page 3
</div>

Fiddle:你能创建一个小提琴吗？我使用它唯一的区别是我的类是section，而不是mydivI。似乎如果我在第18行将0改为1，它就成功了。谢谢大家的帮助。
// caching
var $body = $("body");
var $window = $("window");
var activeSectionOffset = 0; // value to scroll to used by the resize event
var resizeTimeout = null; // to throttle resize events

// animating to next visible element
$(".page").on("inview", function (event, visible, topOrBottomOrBoth) {
  if (visible == true) {
     var scrollVal = $(this).addClass("active").offset().top; // the active class isnt really needed
     activeSectionOffset = scrollVal;
     animateScrollTo( scrollVal );
  } else {
     $(this).removeClass("active");
  }
});

// handy function that scrolls body element to the scrollVal provide
function animateScrollTo( scrollVal ) {
    $body.stop().animate({
        scrollTop: scrollVal
    }, 200);   
}

// resize event
$window.on("resize", function() {
    resizeTimeout = setTimeout(function() { // suppressing multiple resize events
        clearTimeout( resizeTimeout );
        animateScrollTo( activeSectionOffset );
    }, 300);
}).trigger("resize");