页面向上滚动

#页面或者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属性进行滚动.更灵活一点