我尝试创建滚动效果,当触发onclick
事件时,我希望div1
滚动到dev2
。它应该最初缓慢然后快速!。
以下是使用此效果的网站:http://community.saucony.com/kinvara3/
我该怎么做?
答案 0 :(得分:0)
$.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>
这会吗?请根据您的要求调整按钮的位置。
我使用过jQuery mmin(1.11)和jQuery UI(1.11)。
答案 1 :(得分:0)
利用ScrollTop与 offset()。top 将其滚动到DIV节点。
<强> HTML 强>
在要在页面加载时首先显示的DIV项目上添加“活动”类。对我来说,这是第一个DIV项目。
<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);
});