问题
I'm trying to create a scrolling effect where when the onclick event is triggered, I want that div1 to scroll to dev2. It should initially go slowly and then fast!.
Here's a website using this effect: http://community.saucony.com/kinvara3/
How do I do this?
回答1:
$.fn.animateScrollDivs = function(sourceDiv, destinationDiv) {
var source = '#' + sourceDiv;
var destination = '#' + destinationDiv;
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1200, 'easeInExpo');
};
function animateDiv(sourceDiv, destinationDiv) {
$.fn.animateScrollDivs(sourceDiv, destinationDiv);
}div {
height: 650px;
width: 1000px;
}
button {
background-color: #FE2EF7;
}
.downButton {
margin-top: 500px;
margin-bottom: 40px;
margin-right: 200px;
margin-left: 200px;
}
.upButton {
margin-top: 60px;
margin-bottom: 500px;
margin-right: 200px;
margin-left: 200px;
}<body>
<div id="div1" style="background-color:red;">
<button class="downButton" onclick="animateDiv('div1','div2');">Go Down</button>
</div>
<div id="div2" style="background-color:yellow;">
<button class="upButton" onclick="animateDiv('div2','div1');">Go Up</button>
<button class="downButton" onclick="animateDiv('div2','div3');">Go Down</button>
</div>
<div id="div3" style="background-color:grey;">
<button class="upButton" onclick="animateDiv('div3','div2');">Go Up</button>
<button class="downButton" onclick="animateDiv('div3','div4');">Go Down</button>
</div>
<div id="div4" style="background-color:#2E9AFE;">
<button class="upButton" onclick="animateDiv( 'div4', 'div1');">GoToTop</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js "></script>Will this do?? Please adjust the position of button(s) as per your requirement.
I've used jQuery mmin (1.11) and jQuery UI (1.11).
回答2:
Make use of ScrollTop with offset().top to scroll it to DIV nodes.
HTML
Do add a "active" class on DIV item which you want to show at first on page load. For me, it's the first DIV item.
<button class="giu">Animate To Next available List Item</button>
<div class="product active" id="product1">1</div>
<div class="product" id="product2">2</div>
<div class="product" id="product3">3</div>
<div class="product" id="product4">4</div>
JavaScript
$('.giu').click(function(event) {
event.preventDefault();
var n = $(window).height();
$('div.active').removeClass('active').next('div').addClass('active');
$('body').animate({
scrollTop: $(".product.active").offset().top
}, 500);
});
Fiddle - http://jsfiddle.net/ideaovation/fhg1g974/3/
来源：https://stackoverflow.com/questions/31073827/scrolling-effect-slow-at-first-than-it-goes-fast