刚进入页面是不显示文字,然后从右边依次显示出来
当我滚动到这张图片的位置的时候这些蓝色图标依次显示,
怎么设置滚动到一定程度右边的浮动会显示出来
这是鼠标滚动到一定位置显示返回顶端的代码
<script>
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100)/*鼠标滚动距离*/ {
document.getElementById("Right_float").style.display = "block"; /*大于显示*/
}
else {
document.getElementById("Right_float").style.display = "none"; /*小于隐藏*/
}
}
</script>
这是鼠标滑动到最底端,按返回按钮可滚动会最顶端,
var goto_top_type = -1;
var goto_top_itv = 0;
function goto_top_timer() {
var y = goto_top_type == 1 ? document.documentElement.scrollTop
: document.body.scrollTop;
var moveby = 15;
y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}
if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
} else {
document.body.scrollTop = y;
}
if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}
function goto_top() {
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
} else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
} else {
goto_top_type = 0;
}
if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
这个浮动图标可以设置百分比位置。无论滚动条怎么滚,他都在屏幕中央。
document.documentElement.scrollTop 可以通过这个获取到滚动条的位置,然后你可以设置当scrollTop等于多少的时候显示就好了,但是这个方法有兼容问题,如有需要可以查阅https://blog.csdn.net/weixin_43827462/article/details/91414096
可以用js(jq)判断滚动条的长度
假设屏幕滚动到50的距离后,显示返回顶部,首先获取当前滚动距离上面的距离,然后判断大于等于50后,显示:
var top = document.documentElement.scrollTop;
if (top >= 50) {
$(返回顶部dom).show();
} else {
$(返回顶部dom).hide();
}
图片或文字依次滚动这个,你可以用css3的animation,或者jq的animate方法,同样需要先判断当前滚动的位置,假设位置到了图片或文字需要滚动显示的位置后,给这个添加一个有动画的class,或者给dom绑定jq的animate,然后添加标识就行,如:
var imgTop = $(img).offset().top;
var top = document.documentElement.scrollTop;
if (top >= imgTop && !$(img).hasClass("animate-ok")) { //animate-ok是标识是否已经有过动画
$(img).animate({margin-left: 0}); //首先需要设置img块的margin-left为img的宽度的负值,用来开始不显示
}