JS控制DIV滚动条

最新推荐文章于 2024-02-07 17:04:47 发布
最新推荐文章于 2024-02-07 17:04:47 发布
阅读量1.7w 收藏 2
点赞数
分类专栏： javascript 文章标签： div button function xhtml input class
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS控制DIV滚动条</title>

</head>

<script>

function scrollup()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop-25;

}

function scrolldown()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop+25;

}

function scrolltop()

{

document.getElementById('div1').scrollTop = 0;

}

function scrollbottom()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollHeight;

}

</script>

<style>

.div1

{

height:200px;

overflow-y:scroll;

width:400px;

border:solid 1px #ccc;

}

</style>

<body>

<div class="div1" id="div1"><br />

<br />

<br /><br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

 

</div>

<input name="" type="button"  value="向上"/ οnclick="scrollup();">

<input name="" type="button"  value="向下" οnclick="scrolldown();"/>

<input name="" type="button"  value="顶"/ οnclick="scrolltop();">

<input name="" type="button"  value="底" οnclick="scrollbottom();"/>

</body>

</html>

小博
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js DIV滚动条随机位置的设置技巧
12-11
style后面用于限定DIV样式并加滚动条，这个不多说 关键的地方其实很简单，最后两行Javascript就是了，起作用的只有最后一行： obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop：滚动条距离顶部的位置 obj.scrollHeight：流动区域的高度 Math.random()：获得一个随机数 很简单，有人可能需要，用就拿去，哈哈 PS：IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动条位置才不同，刷新却没有变化，但放到网站上之后就正常了 代码如下： 010203040506070
基于JavaScript实现div层跟随滚动条滑动
10-22
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧
JS - 处理元素滚动
最新发布
kelly0721的博客
02-07 366
业务功能中时常有元素滚动的功能，现在就总结一下一些常用的事件。
js固定DIV高度,超出部分自动添加滚动条的简单方法
12-10
代码如下:function setheight()     {     var div=document.getElementById(“event_basicInfo”);     //div.style.width=”40%”;     div.style.height=400;     div.style.overflow=”auto”;     }     [removed]=setheight;
vue.js-div滚动条隐藏但有滚动效果的实现方法
11-29
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐 var evt = window.event || arguments[0]
JS实现div自动滚动
热门推荐
jaylongli的专栏
07-15 1万+
rrrrrrrrrrrrrrrrrrrrrrrrrrrrr r r dd ddddddd ddddddd r r 12234567r89r0
div定时动态滚动列表
qq_39520338的博客
12-11 857
示例 每3秒列表向下滚动一行，每行高度为32，触底或触顶后自动反向滚动! 以下为调用方法 autoScroll(32,32,3000,document.getElementById('hyjbqk')); /** * stepLength：一次滚动步长 * speed：滚动速度 * delay：停留时间 * element：Element对象 * * element.offsetHeight 元素的像素高度（包括边框和填充） * el
scrollUp.js Javascript/jQuery 页面返回顶部
郎涯技术
08-10 1732
顾名思义，ScrollUp就是当页面滚动到超出浏览器高度时出现的一个移动的顶部的按钮，点击该按钮页面滚动条移动到顶部。ScrollUp是一个轻量级的Jquery插件，它创建一个可自定义的“滚动到顶部”的按钮，在任意的网站中进行简单的调用就能达到效果。 ScrollUp提供了四种样式 tab样式胶囊按钮样式链接样式圆型图片样式也可以自定义样式 源码地址： https://github.c
如何用js控制移动div的滚动条
qq_45587822的博客
02-25 3746
API 通过div的scrollTop变动控制bai垂直滚动条位置。 通过zhidiv的scrollLeft变动控制水平dao滚动zhuan条位置。 示例 <body> //d1是外层div，带滚动条 <div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'> <div style='height:500px;width:500px;background:yellow'>222
JS实现div的自动滚动
melland好久不来
10-07 453
用JS实现div的自动滚动。代码如下： &lt;div id="show" style="overflow:hidden;height:210px;"&gt; &lt;/div&gt; &lt;script&gt; function startmarquee(lh,speed,delay){ var t; var oHeight = 210; /** div的高度 **/ var p...
js 实现div里面的内容滚动，并可以通过按钮控制
03-21
NULL 博文链接：https://yangpanwww.iteye.com/blog/984155
让页面上两个div中的滚动条(滑块)同步运动示例
12-04
使用JQuery添加如下代码 代码如下: $(‘#sourceDiv’).scroll( function() { $(‘#targetDiv’).scrollTop($(this).scrollTop()); $(‘#targetDiv’).scrollLeft($(this).scrollLeft()); }); $(‘#targetDiv’)....
通过 JS 判断页面是否有滚动条的实现方法
01-19
最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度，通过...
原生JS实现自定义滚动条效果
12-09
本文实例为大家分享了JS实现自定义滚动条的具体代码，供大家参考，具体内容如下 实现思路： 1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度)，在高的div里面设置5个div，每个div的...
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
10-21
下面小编就为大家带来一篇用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原生js封装自定义滚动条
12-11
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。 在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果...
js操作滚动条事件实例
12-10
本文实例讲述了js操作滚动条事件的方法。分享给大家供大家参考。具体分析如下： 之前一直很纳闷，如何监视滚动条的事件，今天终于有点明白了。 下边代码，是监听滚动条只要移动，下方的返回顶部的div显示与隐藏的...
js网页滚动条滚动事件实例分析
01-19
本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下： 在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：[removed]。当onscroll事件发生时，用js获得页面的scrollTop值...
JavaScript 设置div滚动条向上滚动
06-06
您可以使用以下代码使一个具有滚动条的 `div` 元素向上滚动： ``` var element = document.getElementById("your-div-id"); element.scrollTop = 0; ``` 这会将 `div` 元素的滚动位置设置为顶部，从而实现向上滚动的效果。如果您想要平滑地滚动到顶部，可以使用以下代码： ``` var element = document.getElementById("your-div-id"); element.scrollTo({ top: 0, behavior: 'smooth' }); ``` 这将平滑地将 `div` 元素滚动到顶部。请注意，这些代码只适用于在浏览器中运行的 JavaScript，无法在 Node.js 等环境中使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值