頁面向上滾動

#頁面或者div向上無縫滾動

1.css:

    body {margin: 0;padding: 0;overflow: hidden;}.container {position: relative;top: 0;}.container div {width: 500px;height: 500px;border: 1px solid chartreuse;font-size: 100px;line-height: 500px;font-weight: bold;color: black;text-align: center;text-shadow: 3px 5px 1px salmon;margin-left: calc(50% - 250px);}

2.html

<body><div class="container"><div>11111111 </div><div>2222 2</div><div>333 333</div><div>444444</div><div>5555</div></div>
</body>

3.js (方法一:)

  var scrolltop = $('.container').height() - $(window).height();if (scrolltop > 0) {var time = scrolltop / 40;$('.container').css('transition', 'top ' + time + 's linear');scrolltop = -scrolltop;$('.container').css('top', scrolltop + 'px');}

js方法二:

 function scrollPage(speed, delay) {var timer = nullspeed = JSON.stringify(speed)delay = JSON.stringify(delay)var Ospeed = speed || 20 //設置滾動速度var Ostart = 0//設置初始位置var Odelay = delay || 2 // 設置頁面滾動延遲var scrolltop = $('.container').height() - $(window).height(); //計算滾動距離timer = function () {if (scrolltop > 0) {$('.container').css('position', 'relative')$('.container').css('top', Ostart + 'px');}Ostart--if (-Ostart >= scrolltop) {Ostart = -scrolltop}}setTimeout(function () {setInterval(timer, Ospeed);}, Odelay * 1000)function scrollToBottom() {}}scrollPage(10, 0)

第一種方法是用transition來滾動,偏css一點.但是低版本的ie可能會有bug.
第二種方法是利用js來一直改變css中的top屬性進行滾動.更靈活一點

粘貼復制即可查看效果

轉載于:https://www.cnblogs.com/niluiquhz/p/10282956.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/450112.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/450112.shtml
英文地址，請注明出處：http://en.pswp.cn/news/450112.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！