页面向上滚动
#頁面或者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
總結
- 上一篇： HDU - 5919 Sequence
- 下一篇： [LeetCode-JAVA] The