Question

我有一个简单的页面，有3个大部分（蓝色，红色和灰色），并且定位向上移动和放大向下箭头。 FIDDLE

目前，当我单击向下箭头时，它会拖动/滚动到底部灰色部分，当我单击向上箭头时，它会转到顶部蓝色部分。到目前为止这很好。但我正在考虑让它变得更有活力。

这可以做到：如果我点击 DOWN / UP 箭头，它只会滚动到NEXT bottom / Upper 部分。

方案1：我在蓝色部分点击向下箭头将移至红色部分再次点击向下箭头将滚动到灰色部分

方案2：如果我将鼠标滚动到红色部分并单击向下箭头，则会将我滚动到灰色部分

向上箭头相同。

主要思路是当我点击任何向上或向下箭头时，根据当前位置滚动到下一部分。

我真的是一个完整的初学者为此编写任何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

我最近做过类似的事情，但是使用鼠标滚轮，根据你的按钮需求应该没问题。

Here is a fiddle to show with scrolling

以下是代码：

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并相应地重写底部的函数......

如何根据页面滚动动态更改id

1 个答案: