4

私は自分のサイトでJavaScriptを取得しようとしているので、人がWebサイトをスクロールすると、特定のクラスの次または前のDivに自動的にスクロールします。私はsmoothscrollとscrolltoを使用しています。また、組み合わせようとしている2つのコードを見つけました。しかし、私はスクリプト全体を理解していないようです...

最初のスクリプトはhttp://webdesignerwall.com/tutorials/scrollto-posts-with-jqueryからのものです。このスクリプトを使用すると、nextまたはpreviousを押すことにより、（特定のクラスの）DIV間を移動できます。

2番目のスクリプトは、mousewheel、jQueryに「スムーズなスクロール」ルールを適用する方法からのものです。（最後の投稿）そして、スクロール時にウェブサイトを特定のピクセル数だけ上下にスクロール（スムーズ）させることができます。

私はこれら2つを組み合わせたかったのですが、それは私にとって本当に簡単ではありません：/誰かが私にこれを行う方法を教えてくれたらいいのにと思います。ありがとう

よろしくお願いします、

ビリービーチ

親愛なるラリビ、

ご回答有難うございます。私はあなたのコードを試しましたが、うまくいかないようです。これが私が使用したコードです：

<head>


<script type="text/javascript" src="Box/jquery.js"></script>
<SCRIPT src="Box/jquery.min.js"></SCRIPT>
<SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"></SCRIPT>
<script type="text/javascript" src="Box/jquery.mousewheel.min.js"></script> 


<style type="text/css">
<!--

div {
    border: 1px solid black;
    height: 50px;
}

div.current {
    background-color: orange;
}

-->
</style>


<script type="text/javascript"> 

var current 

$(function() {          
    $('body').mousewheel(function(event, delta) {
        var $current = $('div.current');

        console.log(delta);
        console.log($current);

        if (delta > 0) {
            $prev = $current.prev();

            if ($prev.length) {
                $('body').scrollTo($prev, 100);
                $current.removeClass('current');
                $prev.addClass('current');
            }
        } else {
            $next = $current.next();

            if ($next.length) {
                $('body').scrollTo($next, 100);
                $current.removeClass('current');
                $next.addClass('current');
            }
        }

        event.preventDefault();
    });
});

</script> 



</head>

<body>

<div class="current" id="div">1</div>
<div id="div">2</div>
<div id="div">3</div>
<div id="div">4</div>
<div id="div">5</div>
<div id="div">6</div>
<div id="div">7</div>
<div id="div">8</div>
<div id="div">9</div>
<div id="div">10</div>
<div id="div">11</div>
<div id="div">12</div>
<div id="div">13</div>
<div id="div">14</div>
<div id="div">15</div>
<div id="div">16</div>
<div id="div">17</div>
<div id="div">18</div>
<div id="div">19</div>
<div id="div">20</div>
<div id="div">21</div>
<div id="div">22</div>
<div id="div">23</div>
<div id="div">24</div>
<div id="div">25</div>
<div id="div">26</div>
<div class="current" id="div">27</div>
<div id="div">28</div>
<div id="div">29</div>
<div id="div">30</div>
<div id="div">31</div>
<div id="div">32</div>
<div id="div">33</div>
<div id="div">34</div>
<div id="div">35</div>
<div id="div">36</div>
<div id="div">37</div>
<div id="div">38</div>
<div id="div">39</div>
<div id="div">40</div>
<div id="div">41</div>
<div id="div">42</div>
<div id="div">43</div>
<div id="div">44</div>
<div id="div">45</div>
<div id="div">46</div>
<div id="div">47</div>
<div id="div">48</div>
<div id="div">49</div>
<div id="div">50</div>
<div id="div">51</div>
<div id="div">52</div>
<div id="div">53</div>
<div id="div">54</div>
<div id="div">55</div>
<div id="div">56</div>
<div class="current" id="div">57</div>
</body>
</html>
4

1 に答える 1

1

編集：フィドルを少し調整しました。2 つの外部スクリプトの 1 つが使用されてhttp:おり、リンク (編集前) が使用さhttps:れたため、小さな盾のアイコンを押さない限り、Chrome はそれをブロックしました。私も最新版にアップデートしました。

これはうまくいくようです：http://jsfiddle.net/9Amdx/1707/

var current;

$(function() {          
    $('body').mousewheel(function(event, delta) {
        var $current = $('div.current');

        console.log(delta);
        console.log($current);

        if (delta > 0) {
            $prev = $current.prev();

            if ($prev.length) {
                $('body').scrollTo($prev, 100);
                $current.removeClass('current');
                $prev.addClass('current');
            }
        } else {
            $next = $current.next();

            if ($next.length) {
                $('body').scrollTo($next, 100);
                $current.removeClass('current');
                $next.addClass('current');
            }
        }

        event.preventDefault();
    });
});
于 2011-11-17T16:26:26.273 に答える