jquery scrollTop和scroll事件学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;border: 0;}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: #ccc;text-align: center;font-size: 24px;position: fixed;top: 2%;right: 2%;">scroll: <p></p></div>
<div class="divtop" style="width: 1349px;height: 1000px;background: #666;">top</div>
<a class="top" href="https://www.baidu.com" target="_blank" >scrollTop</a>
<div style="width: 1349px;height: 100px;background: #777;">top</div>
<a class="scrollTarget" href="https://www.baidu.com" target="_blank" >scrollTarget</a>
<div style="width: 1349px;height: 100px;background: #888;">top</div>
<a class="bottom" href="https://www.baidu.com" target="_blank" >scrollBottom</a>
<div style="width: 1349px;height: 1000px;background: #999;display:table-cell;
vertical-align:bottom;">bottom</div>
<script>
$(document).ready(function(){
$("a.top").click(function() {
$(window).scrollTop(0);
//或$("body,html").animate({"scrollTop":0},200);
return false;
});
$("a.scrollTarget").click(function(event) {
event.preventDefault();
$('html,body').stop().animate({scrollTop: $("a.scrollTarget").offset().top}, 200);
//return false;阻止href
//或者js href="javascript:void(0)"
//或event.preventDefault();
});
function bottom() {$('html,body').animate({scrollTop: $(document).height()}, 200);return false;}
$("a.bottom").on("click",bottom);
$(window).scroll(function(){
var sh,ph,wh;
sh = $(window).scrollTop();
ph = $(".top").offset().top;
wh = $(window).height();
$("p").text($(window).scrollTop());
if (sh+wh>ph) {
$(".divtop").css({"background-color":"red"});
} else {
$(".divtop").css({"background-color":"yellow"});
};
})
});
(function(){})();
$(function(){});
</script>
</body>
</html>
直接到页面top，bottom和指定位置的写法，页面滚动过程中的事件。
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
