单击按钮实现滚动条滚动

___紫菜 2014-08-26 03:37:22

今天用jquery弄了一天了，网上找了各种例子结果还是没弄出来。

这是已经弄好的滚动条内容，现在像点击三角形图标滚动时间。
唉！！！好苦逼。

...全文

631 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

___紫菜 2014-08-26

打赏
举报

引用 6 楼 u013472677 的回复:

[quote=引用 5 楼 u013116426 的回复:] [quote=引用 1 楼 u013472677 的回复:]


<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var h = 0
  $(".btn1").click(function(){
	h += 100;
    $("div").scrollTop(h);
  });
  $(".btn2").click(function(){
	if(h<=0){
		return;
	}
    h -= 100;
    $("div").scrollTop(h);
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">down</button>
<br />
<button class="btn2">up</button>
</body>
</html>

呃，你这个还有点小问题哦。当我用滚轮滚到中间位置在用按钮点的话，他会从默认的0位置开始滚动。所以要加点代码，就是在滚动条当前位置的地方开始滚动。加个h=$("#cc").scrollTop();在每个按钮事件里面。[/quote] 这个只是演示用，实际使用还得根据需求改

[/quote] 对哦。

qcxl 2014-08-26

打赏
举报

引用 5 楼 u013116426 的回复:

[quote=引用 1 楼 u013472677 的回复:]


<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var h = 0
  $(".btn1").click(function(){
	h += 100;
    $("div").scrollTop(h);
  });
  $(".btn2").click(function(){
	if(h<=0){
		return;
	}
    h -= 100;
    $("div").scrollTop(h);
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">down</button>
<br />
<button class="btn2">up</button>
</body>
</html>

___紫菜 2014-08-26

打赏
举报

引用 1 楼 u013472677 的回复:


<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var h = 0
  $(".btn1").click(function(){
	h += 100;
    $("div").scrollTop(h);
  });
  $(".btn2").click(function(){
	if(h<=0){
		return;
	}
    h -= 100;
    $("div").scrollTop(h);
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">down</button>
<br />
<button class="btn2">up</button>
</body>
</html>

呃，你这个还有点小问题哦。当我用滚轮滚到中间位置在用按钮点的话，他会从默认的0位置开始滚动。所以要加点代码，就是在滚动条当前位置的地方开始滚动。加个h=$("#cc").scrollTop();在每个按钮事件里面。

___紫菜 2014-08-26

打赏
举报

引用 3 楼 u013472677 的回复:

[quote=引用 2 楼 u013116426 的回复:] 为何这么厉害,我瞎折腾了一天都没弄出来。唉，高手不愧是高手。谢谢啊！！！

我从W3C网上复制来的 http://www.w3school.com.cn/jquery/css_scrolltop.asp[/quote]

不过还是谢谢你啊！

qcxl 2014-08-26

打赏
举报

引用 2 楼 u013116426 的回复:

为何这么厉害,我瞎折腾了一天都没弄出来。唉，高手不愧是高手。谢谢啊！！！

我从W3C网上复制来的 http://www.w3school.com.cn/jquery/css_scrolltop.asp

___紫菜 2014-08-26

打赏
举报

为何这么厉害,我瞎折腾了一天都没弄出来。唉，高手不愧是高手。谢谢啊！！！

qcxl 2014-08-26

打赏
举报


<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var h = 0
  $(".btn1").click(function(){
	h += 100;
    $("div").scrollTop(h);
  });
  $(".btn2").click(function(){
	if(h<=0){
		return;
	}
    h -= 100;
    $("div").scrollTop(h);
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">down</button>
<br />
<button class="btn2">up</button>
</body>
</html>