现在由于内容区域的高度越来越长,在网站上要看全部内容页需要越拉越长,在电脑上点击更滚动条可以很轻松的上下拖动,但是放到触摸屏上面呢,由于没有鼠标和键盘,会导致很难拉动滚动条上下滚动,这就需要我们做控件,控制滚动条上下滚动。
那我们改怎么做来控制呢,实例:
<html>代码如下
<div style="position:fixed;left:80%; top:10%;">
<span id="up">向上</span>
<span id="down">向下</span>
</div>
这是让控件在网站的那个位置出现
<div style="position:fabsolute;left:80%;bottom:10%;">
<span id="up">向上</span>
<span id="down">向下</span>
</div>
2种定位做法。现在我们有了控件,那 怎么用控件来控制呢
首先肯定是要加载JQ的文件
<script type="text/javascript" src="../tdjk/js/jquery-1.7.1.min.js"></script>
然后
<script type="text/javascript">
$("#down").click(function(){
$(document).scrollTop($(document).scrollTop()+100);
})
$("#up").click(function(){
$(document).scrollTop(0);
})
第一条是向下,点击一次移动100像素。
下面一条就是回到顶部。你也可以加点动画效果用animate();
</script>