页面向上滚动
页面或者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 = null
speed = 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属性进行滚动.更灵活一点
**
