js滚动条滚动到底部和顶部

最新推荐文章于 2024-07-05 10:20:02 发布
最新推荐文章于 2024-07-05 10:20:02 发布
阅读量4.4k 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaofei_liang/article/details/77916463
版权 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.scrolldiv{
			width: 500px;
			height: 400px;
			margin: 1000px auto 100px auto;
			background: #f00;
		}
	</style>
</head>
<body>
<div class="scrolldiv"></div>


<script type="text/javascript">
	function scrollBottomOrTop(){
		var clients=window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight;
		var scrollTop=document.body.scrollTop;
		var wholeHeight=document.body.scrollHeight;
		if(clients+scrollTop>=wholeHeight){
			alert('我到底部了');
		}
		if(scrollTop==0){
			alert('我到顶部了');
		}
	}
	window.οnscrοll=scrollBottomOrTop;
</script>
</body>
</html>

程序员库里
关注
专栏目录
js/html实现滚动到顶部底部某个指定位置
09-20
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
js 默认滚动到最底部
热门推荐
“明明很开心”的博客空间
05-22 3万+
首先，想要默认滚动到最底部，思路是： 判断页面/元素是否出现了滚动条 —— 判断方法是：页面/元素高度有没有超过滚动高度 若有滚动条即把滚动条滚动到最底部 现在我们来了解几个dom属性: scrollTop:获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0 scrollHeight:这是一个只读属性，是元素内容高度的度量，...
分享 10个简单实用的 JS 代码技巧
最新发布
欢迎光临
07-05 596
我们经常需要这样做，在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的userAgent来确定的。有时候我们需要将元素滚动到可见区域，怎么办？除了区分是手机端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS。你一定遇到过这样的场景，需要全屏播放视频，在浏览器中全屏打开页面。是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。当然，如果知道文档的高度，也可以平滑滚动到页面底部。需要一种适用于所有平台的防止事件冒泡的方法。
js实现滚动条滚动到页面底部继续加载
11-23
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/；如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type="text/css"> html,body, div, dl, dt, d
js判断滚动条是否已到页面最底部或顶部实例
11-30
本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下： 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。 当可视区域小于页面的实际高度时，判定为出现滚动条，即： 代码如下:if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true; 要使用 document.documentElement ，必须在页面头部加入声明： 代码
js 滚动条自动滚动到最底部
qq_36521848的博客
04-23 2954
功能简介，js 滚动条自动滚动到最底部。
原生js判断滚动条滚到底部
qiansuike的博客
06-18 513
如题 开发中经常遇到，滚动条滚到底部加载下一页，或者给出提示的需求，也踩过一些坑。 坑的表现： 1）还没到底部，就已经触发了加载下一页的方法(以前遇到过，但是错误的代码已经忘了) 2）多次触发，导致多次调用或者一些异常情况 3）在滚动的时候，偶尔会出现ScrollTop值为空或者undefined的情况 网上的方法不一定奏效的，贴两个原生解决方法： //滚动条在Y轴上的滚动距离 function getScrollTop() { var scrollTop = 0, bodyScro
js判断滚动条是否到达顶部、底部 兼容各种浏览器
蓝魔
05-12 5668
iScroll demo: simple      window.onscroll=function(){ test(); } function test(){ var a = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; va
实现div内部滚动条滚动到底部和顶部的代码
08-28
"实现div内部滚动条滚动到底部和顶部的代码" 在Web开发中，实现div内部滚动条滚动到底部和顶部是非常常见的需求。今天，我们将分享一个简洁的代码，用于实现div内部滚动条滚动到底部和顶部的功能。 代码分析 首先...
JS实现判断滚动条滚到页面底部并执行事件的方法
10-25
以下是一个使用jQuery来实现当滚动条滚动到页面底部时执行特定事件的示例代码： ```javascript scrollBottomTest = function() { $("#contain").scroll(function() { var $this = $(this), viewH = $this.height...
scrollbottom浏览器滚动触底事件探测模块
08-12
Scroll 模块提供添加和移除浏览器滚动条触底事件监听，兼容amd、cmd、全局引用
基于javascript实现浏览器滚动条快到底部时自动加载数据
10-23
在jQuery中，我们可以使用`$(window).scroll()`来监听滚动事件，然后通过`$(window).scrollTop()`获取滚动条距离顶部的距离，再结合`$(document).height()`和`$(window).height()`计算出用户是否接近页面底部。...
js 滚动条回到顶部和底部
weixin_50236973的博客
06-24 236
js 滚动条回到顶部和底部
js 滚动条可滚动到顶部或底部
m0_65730686的博客
07-11 438
js 滚动条可滚动到顶部或底部
js控制滚动条置底
m0_56354910的博客
12-22 1071
【代码】js控制滚动条置底。
javascript 设置滚动条在最底层
11-13 3752
javascript 设置滚动条在最底层。
js：scroll平滑滚动页面或元素到顶部或底部的方案汇总
彭世瑜的博客
07-12 1万+
可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值