如何根據頁面滾動動態更改ID

Question

我有一個包含3個大部分（藍色，紅色和灰色）的簡單頁面，並固定了上下移動箭頭的位置。 小提琴

當前，當我單擊“向下”箭頭時，它將拖動/滾動到“底部灰色”部分；當我單擊“向上”箭頭時，它將轉到“頂部藍色”部分。 到目前為止，這很好。 但我當時正在考慮使其更具活力。

這是否有可能：如果我單擊DOWN / UP箭頭，它將僅滾動到NEXT 底部/上部 。

場景1：我在藍色部分上，單擊“向下”箭頭將移至紅色部分，然后再次單擊“向下”箭頭將滾動至“灰色”部分

情況2：如果我將鼠標滾動到紅色部分，然后單擊DOWN箭頭，它將滾動到灰色部分

與向上箭頭相同。

主要思想是當我單擊任何向上或向下箭頭時，根據當前位置滾動到下一部分。

我真的是一個完整的初學者，可以為此編寫任何jQuery / javaScripts。我什至不確定jQuery是否可以實現。

預先感謝您的任何幫助。

HTML

<div class='container'>
    <div class='div1' id='position1'></div>
    <div class='div2' id='position2'></div>
    <div class='div3' id='position3'></div>

    <div class='move-down'><a href='#position3'>v</a></div>
    <div class='move-up'><a href='#position1'>^</a></div>
</div>

Answer 1

我最近做了類似的事情，但是使用鼠標滾輪，使其適應您的按鈕需求應該沒有問題。

這是滾動顯示的小提琴

這是代碼：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

    function transitionTo(elem){
        $('html, body').stop().animate({
            scrollTop: $(elem).offset().top

        }, 2000, function ()  {
            flag = true;
            flag1 = true;
            flag2 = true;
        });
    }

    function getDelta(e){
        var evt = window.event || e ;
        evt = evt.originalEvent ? evt.originalEvent : evt;
        return evt.detail ? evt.detail*(-40) : evt.wheelDelta;
    }

    var flag = true;
    $('#position1').bind(mousewheelevt, function(e){
        e.preventDefault();
        var delta = getDelta(e);

        if(delta < 0 && flag == true)
        {
            flag = false;
            transitionTo('#position2');
        }

    });

    var flag1 = true;
    $('#position2').bind(mousewheelevt, function(e){
        e.preventDefault();
        var delta = getDelta(e);

        if(delta < 0 && flag1 == true)
        {
            flag1 = false;
            transitionTo('#position3');
        }
        else if (delta > 0 && flag1 == true) {
            flag1 = false;
            transitionTo('#position1');
        }
    });

    var flag2 = true;
    $('#position3').bind(mousewheelevt, function(e){
        e.preventDefault();
        var delta = getDelta(e);

        if(delta < 0)
        {


        }
        else if (delta > 0 && flag2 == true) {
            flag2 = false;
            transitionTo('#position2');
        }
    });

要讓您的按鈕與相同的過渡交互，請在下面添加以下內容：

$('#position1').on('mouseover', function () {
    var position = 1;
    $('.move-down').on('click',function(e){
            e.preventDefault();
            transitionTo('#position2');
        });
});
$('#position2').on('mouseover',function () {
    var position = 2;
    $('.move-down').on('click',function(e){
            e.preventDefault();
            transitionTo('#position3');
        });
    $('.move-up').on('click',function(e){
            e.preventDefault();
            transitionTo('#position1');
        });
});
$('#position3').on('mouseover',function () {
     var position = 3;

    $('.move-up').on('click',function(e){
            e.preventDefault();
            transitionTo('#position2');
        });
});

---

只需找到當前的div並相應地重寫底部的函數即可。