使用鼠标滚轮平滑滚动到下一个或上一个 div

发布于 2024-12-17 01:13:26 字数 4162 浏览 3 评论 0原文

我正在尝试在我的网站上获取 JavaScript，以便当有人在网站上滚动时，它会自动滚动到具有特定类别的下一个或上一个 Div。我正在使用 smoothscroll 和scrollto。我还发现了两个我试图合并的代码。但我似乎不理解整个脚本...

第一个脚本来自 http ://webdesignerwall.com/tutorials/scrollto-posts-with-jquery。该脚本使得可以通过按下一个或上一个在 DIV（具有特定类）之间导航。

第二个脚本来自如何强制“平滑滚动” ” 鼠标滚轮规则，jQuery？（最后一篇文章），并且可以使网站在滚动时向下或向上滚动（平滑）一定数量的像素。

我想将这两者结合起来，但这对我来说并不是很简单：/ 如果有人能指出我如何做到这一点，那就太好了。谢谢

最好的问候，

比利海滩

亲爱的拉利比，

感谢您的回答。我尝试了你的代码，但似乎无法正常工作。这是我使用的代码：

<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>

原文

I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts...

The first script is from http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.

The second script is from How to enforce a "smooth scrolling" rule for mousewheel, jQuery? (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.

I wanted to combine these two but it's not really straight forward for me :/
It would be nice if someone could point me how to do this. Thanks

Best regards,

Billy Beach

Dear lalibi,

Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千柳 2024-12-24 01:13:26

编辑：我稍微调整了一下小提琴。两个外部脚本之一使用 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();
    });
});

EDIT: I tweaked the fiddle a little bit. One of the two external scripts was using http: and since the link (before the edit) used https:, Chrome blocked it unless you pressed the little shield icon. I also updated to latest version.

This seems to work fine: 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();
    });
});

回复收藏 0 原文

~没有更多了~