jQuery來懸停滾動頁面

Question

jsFiddle

HTML

<div class="next">Next</div> 
<div class="prev">Prev</div> 

jQuery的

$(function() { 
     $('ul.nav a').bind('click',function(event){ 
      var $anchor = $(this); 
      $('html, body').stop().animate({ 
       scrollLeft: $($anchor.attr('href')).offset().left 
      }, 1000); 
      event.preventDefault(); 
     }); 
    }); 

這個想法聽起來很簡單，但我不能得到這個工作的。我希望能夠滾動下一頁或上一頁的懸停頁面。我有點擊滾動來定位，但這個增加的功能將是完美的。

Answer 1

只要你需要照顧的邊緣情況下，樣機：

$(function() { 
 
    $('ul.nav a').bind('click',function(event){ 
 
    var $anchor = $(this); 
 
    $('html, body').stop().animate({ 
 
     scrollLeft: $($anchor.attr('href')).offset().left 
 
    }, 1000); 
 
    event.preventDefault(); 
 
    }); 
 
    $('.next').on('mouseenter', rscroll); 
 
    $('.prev').on('mouseenter', lscroll); 
 
    $('.next,.prev').on('mouseleave', function() { 
 
    $('body').stop(); 
 
    }); 
 

 
    function rscroll() { 
 
    $('body').animate({ 
 
     scrollLeft: '+=25' 
 
    }, 10, rscroll); 
 
    } 
 

 
    function lscroll() { 
 
    $('body').animate({ 
 
     scrollLeft: '-=25' 
 
    }, 10, lscroll); 
 
    } 
 
});

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.prev, .next{ 
 
    color:#fff; 
 
    position:fixed; 
 
    top:200px; 
 
    height:100%; 
 
    text-shadow:1px 1px 1px #000; 
 
} 
 
.prev{ 
 
    left:0; 
 
} 
 
.next{ 
 
    right:0; 
 
} 
 
body{ 
 
    background:#000; 
 
    font-family:Georgia; 
 
    font-size: 34px; 
 
    font-style: italic; 
 
    letter-spacing:-1px; 
 
    width:12000px; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    bottom:0px; 
 
} 
 
.section{ 
 
    margin:0px; 
 
    bottom:0px; 
 
    width:4000px; 
 
    float:left; 
 
    height:100%; 
 
    text-shadow:1px 1px 2px #f0f0f0; 
 
} 
 
.section h2{ 
 
    margin:50px 0px 30px 50px; 
 
} 
 
.section p{ 
 
    margin:20px 0px 0px 50px; 
 
    width:600px; 
 
} 
 
.black{ 
 
    color:#fff; 
 

 
    background:#000 url(../images/black.jpg) no-repeat top right; 
 
} 
 
.white{ 
 
    color:#000; 
 
    background:#fff url(../images/white.jpg) no-repeat top right; 
 
} 
 

 
.section ul{ 
 
    list-style:none; 
 
    margin:20px 0px 0px 550px; 
 
} 
 
.black ul li{ 
 
    float:left; 
 
    padding:5px; 
 
    margin:5px; 
 
    color:#aaa; 
 
} 
 
.black ul li a{ 
 
    display:block; 
 
    color:#f0f0f0; 
 
} 
 
.black ul li a:hover{ 
 
    text-decoration:none; 
 
    color:#fff; 
 
} 
 
.white ul li{ 
 
    float:left; 
 
    padding:5px; 
 
    margin:5px; 
 
    color:#aaa; 
 
} 
 
.white ul li a{ 
 
    display:block; 
 
    color:#222; 
 
} 
 
.white ul li a:hover{ 
 
    text-decoration:none; 
 
    color:#000; 
 
}

<script src="http://tympanus.net/Tutorials/WebsiteScrolling/jquery.easing.1.3.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="next">NExt</div> 
 
<div class="prev">Prev</div> 
 
<div class="section black" id="section1"> 
 
    <h2>Section 1</h2> 
 
    <p> 
 
    MY Spectre around me night and day 
 
    Like a wild beast guards my way; 
 
    My Emanation far within 
 
    Weeps incessantly for my sin. 
 
    </p> 
 
    <ul class="nav"> 
 
    <li>1</li> 
 
    <li><a href="#section2">2</a></li> 
 
    <li><a href="#section3">3</a></li> 
 
    </ul> 
 
</div> 
 
<div class="section white" id="section2"> 
 
    <h2>Section 2</h2> 
 
    <p> 
 
    ‘A fathomless and boundless deep, 
 
    There we wander, there we weep; 
 
    On the hungry craving wind 
 
    My Spectre follows thee behind. 
 

 
    </p> 
 
    <ul class="nav"> 
 
    <li><a href="#section1">1</a></li> 
 
    <li>2</li> 
 
    <li><a href="#section3">3</a></li> 
 
    </ul> 
 
</div> 
 
<div class="section black" id="section3"> 
 
    <h2>Section 3</h2> 
 
    <p> 
 
    ‘He scents thy footsteps in the snow 
 
    Wheresoever thou dost go, 
 
    Thro’ the wintry hail and rain. 
 
    When wilt thou return again? 
 

 
    </p> 
 
    <ul class="nav"> 
 
    <li><a href="#section1">1</a></li> 
 
    <li><a href="#section2">2</a></li> 
 
    <li>3</li> 
 
    </ul> 
 
</div>