如何做自动scorll

Question

我在我的网站上有一些div 而且我希望当用户捣乱一个小礼物时，页面将会sc并且下一个div将显示为
例如，如果我有2个div：

 <div style="height:800px;">some content </div>
 <div style="height:800px;">some content </div>

因此，当页面加载时，显示第一个div，现在我希望如果用户将一个litlle位放到下一个div，则所有页面将向上滚动，下一个div将显示

Answer 1

捕获滚动事件，当用户滚动跳转到您的ID时。

window.onscroll= function(){
    window.location.href=widow.location + '#<desired_id>';
}

或：

如果你有固定的div：

window.onscroll= function(){
    window.scrollTo(x,y);
}

<强> How to tell the current scroll posotion:

window.onscroll = function() {
    var top = pageYOffset || 0;
    console.log('top:' + top)
}

Answer 2

使用jQuery

取自Check if element is visible after scrolling

你可以使用这个功能来检测用户是否有一个小小的位置到下一个div＆＃34;然后展示你想要展示的div：

<div id="div1" style="height:800px;">some content</div>
<div id="div2" style="height:800px;">some content</div>

// checks if the element passed in is in view
function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

// get the element to check e.g. the "next div" in your case
var el = document.getElementById('div2');

// when the user scrolls, check if the element has come into view
window.onscroll = function() {
    if (isScrolledIntoView(el)) {
        // take the user to the top of the div by it's id
        $('html, body').animate({ 
            scrollTop: $('#div2').offset().top 
        }, 'slow');
        return false;
    }
}

Answer 3

<div  id="div1" style="height:800px;">some content </div>
<div id="div2" style="height:800px;">some content </div>

**Considering the Above two divs**



var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ?"DOMMouseScroll" : "mousewheel" 
    //FF doesn't recognize mousewheel as of FF3.x
        $('#div1').bind(mousewheelevt, function(e){

            var evt = window.event || e //equalize event object     
            evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
            var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

            if(delta > 0) {
                //scroll up 

                $('#div1').hide();
                $('#div2').show();
            }
            else{
                //scroll down

                $('#div2').hide();
                $('#div1').show();
            }   
        });