js控制滚动条示例
2023-09-27 14:29:33 时间
//alert(document.body.scrollHeight);
timer1=setInterval("runToButtom()",1);
}
function runToTop(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=10;
if(currentPosition 0)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,0);
clearInterval(timer);
alert("over_top");
}
}
function runToButtom(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition+=10;
var topheight=document.body.scrollHeight-document.body.clientHeight;
//alert(currentPosition+"---"+topheight);
if(currentPosition topheight)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,topheight);
clearInterval(timer1);
alert("over_buttom");
}
}
/script
style type="text/css"
/style
/head
body
div 饭 /div div 吃 /div div 家 /div div 回 /div div 你 /div div 带 /div div id="back-up" 返回顶部 /div script
GoButtom();
/script
/body
/html
我们在项目中可能会遇到这样的需求,控制页面滚动条的位置,来显示不同的内容。这里给出一个使用原生js来控制滚动条的方法,实现起来非常简单 一、HTML代码 1111111111111111111111 111111111111111...
timer1=setInterval("runToButtom()",1);
}
function runToTop(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=10;
if(currentPosition 0)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,0);
clearInterval(timer);
alert("over_top");
}
}
function runToButtom(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition+=10;
var topheight=document.body.scrollHeight-document.body.clientHeight;
//alert(currentPosition+"---"+topheight);
if(currentPosition topheight)
{
window.scrollTo(0,currentPosition);
}
else
{
window.scrollTo(0,topheight);
clearInterval(timer1);
alert("over_buttom");
}
}
/script
style type="text/css"
/style
/head
body
div 饭 /div div 吃 /div div 家 /div div 回 /div div 你 /div div 带 /div div id="back-up" 返回顶部 /div script
GoButtom();
/script
/body
/html
我们在项目中可能会遇到这样的需求,控制页面滚动条的位置,来显示不同的内容。这里给出一个使用原生js来控制滚动条的方法,实现起来非常简单 一、HTML代码 1111111111111111111111 111111111111111...
相关文章
- JS基础 流程控制
- js跨域问题
- 【小程序】wxml页面如何调用js中的变量数据?(图文示例)
- DOM操作,控制HTML元素 (原生JS)
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- 【转】HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
- js 合并对象 (3种方法)
- js实现addClass方法,classList与className有什么区别?
- js函数只执行一次,函数重写,变量控制与闭包三种做法
- js 所有事件列表
- About js
- 微信 小程序组件 加入购物车全套 one js
- JS控制只能输入数字
- js动态添加script脚本、检测script脚本、删除script脚本
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
- [js高手之路]this知多少
- js控制页面的全屏展示和退出全屏显示
- Three 之 three.js (webgl)简单的渲染策略(简单性能优化/主要根据渲染控制 render 渲染调用)
- JS 四种条件控制语句
- JavaScript学习第1天:浏览器组成、JS的组成、变量、数据类型转化、运算符、流程控制、数组、函数
- 主流浏览器js 引擎内核市场份额attialx总结vOa9
- js 判断当前操作系统是ios还是android还是电脑端
- JS来控制div高度的自适应,html中有多个div,div需要根据屏幕和浏览器的高度实现高度的自动变化,div嵌套的有 iframe ,iframe用来展示网络资源内容
- JS中document和window的区别
- 封装公共js,使其他页面可以调用
- [转] JS运算符 &&和|| 及其优先级