javascript - 如何在滚动时滚动到页面上的特定 div?

标签 javascript jquery html scroll

我有一个页面,其中四个主要的 div 一个接一个地垂直堆叠。我需要滚动,它应该直接在 div 之间移动,而不是正常滚动。

我正在使用 ScrollTo插件功能,但它不能正常工作,因为我必须在滚动上执行所有操作,但在插件示例中它使用按钮。

有人知道我该怎么做吗?

我想要一个类似于此页面的行为。

Example

enter

http://jsfiddle.net/jLG7W/

最佳答案

您作为示例链接到的网站似乎正在使用 fullPage.js jQuery 插件。这就是我猜你会追求的。

编辑:

为了在没有任何插件的情况下工作,可以尝试这样的事情

var divs = ["first","second","third","fourth"];
var counter = 0;

document.addEventListener("mousewheel", function(e) {

    if(e.wheelDelta > 0){ // up 
        if(counter > 0){
            counter--;
            document.getElementById(divs[counter+1]).style.display = "none";
            document.getElementById(divs[counter]).style.display = "block";
        } 
    }
    else if(e.wheelDelta < 0){ // down

        if(counter < (divs.length-1)){        
            counter++;
            document.getElementById(divs[counter-1]).style.display = "none";
            document.getElementById(divs[counter]).style.display = "block";
        } 
    }

});

演示:http://jsfiddle.net/jLG7W/1/

关于javascript - 如何在滚动时滚动到页面上的特定 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21932021/

相关文章:

javascript - JS构造函数的原型(prototype)属性和它的原型(prototype)之间的区别

javascript - Text Not Ellipsis 在某些时候使用 jQuery 插件

javascript - IE11 与 jQuery 的 'readonly' 不兼容?

javascript - Bootstrap 推/拉 - Div 未正确对齐

javascript - 如何触发 javascript css 操作?

javascript - Angular 扩展 ui.bootstrap.progressbar 以支持进度条上的某些文本

javascript - 如何在 Kynetx 规则中正确发出 javascript?

javascript - 分割汉字

javascript - 使 iframe 淡入淡出

php - 如何在 PHP 中将 "decimal string"转换为没有句点的整数