Scrolling effect: Slow at first than it goes fast

2019-03-06 17:32发布

站内问答 / HTML/CSS
1329 2 6

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?

2条回答
Deceive 欺骗
2楼-- · 2019-03-06 17:37

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/

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
3楼-- · 2019-03-06 17:38 

$.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).

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)