js或者jQ处理页面滚动的办法都有什么啊，鼠标滚轮以及拖动滚动条等

1滚动条：

JS：onScroll;

JQ：scroll(function);

滚动条，快速回到顶部代码：

 $(function() {

      var scrollDiv = documentcreateElement('div');

      $(scrollDiv)attr('id', 'toTop')html('返回顶部')appendTo('body');

      $(window)scroll(function() {

             if ($(this)scrollTop() != 0) {

                 $('#toTop')fadeIn();

             } else {

                 $('#toTop')fadeOut();

             }

      });

     $('#toTop')click(function() {

           $('body,html')animate({ scrollTop: 0 }, 800);

     })

 });

为了看见，给div加上一个css样式（背景，边框）就可以了。background: #121212;

2滚轮：

JS：onMouseWheel

JQ：找插件，网上可以搜到。

滚轮代码根据需要自己写，没什么好的例子，注意JS原声的滚轮滚动一圈在不同浏览器的兼容性写法就好。

楼主可以看看下面的：

http://wwww3cschoolcc/jsref/event-onscrollhtml

http://wwww3schoolcomcn/jquery/event_scrollasp

http://liuna718-163-comiteyecom/blog/1796887

本文介绍了jQuery slideToggle在一个包含thead和tbody元素的表格上。没有动画。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一张桌子，上面有一个thead和tbody部分。我已经成功应用了slideToggle，但动画已被破坏。

当用户点击thead时，我希望tbody的内容向上滑动。目前发生的情况是该部分简单消失，没有任何动画。

这是表格

<表> < thead> < tr> < td colspan =3> TABLE HEADING< / td> < / tr> < / thead> < tbody> < tr> < td class =firstcolspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < / tr> < / tbody> < / table>

以下是我正在使用的jQuery：

< script type =text / javascriptlanguage =javascript> $（document）ready（function（）{ $（thead）。click（function（）{ $（this）next（tbody）。slideToggle slow）; } ）}）; < / script>

解决方案

由于<不管你用CSS设置它的高度，tbody> 通常不会比最高的 td 短。

这就是自然高度 tbody 似乎消失的原因，而具有人为额外高度的那个似乎运行到 tr 达到了它的自然高度。

你可以用 tbody {display：block;} 。 查看jsFiddle上的kludge。

但是，请注意设置表格高度时的效果。 p>

可能最好的办法是将整个表格封装在一个div和 slideToggle 中，如下所示：

< table class =AbbyNormal> < thead>< tr>< td colspan =3> TABLE HEADING< / td>< / tr>< / thead> < / table> < div class =tableWrap> < table class =AbbyNormal> < tbody> < tr> < td class =firstcolspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < td colspan =1>单元格内容< / td> < / tr> < / tbody> < / table> < / div>

请确定并修正表格宽度。

在jsFiddle上查看它的行动。

I have a table with a thead and tbody sections I have applied a slideToggle on this successfully, but the animation is broken

When a user clicks on the thead, I want the contents of the tbody to slide up Currently what happens is the section simply disappears, without any animation

Here is the table

<table>

<thead>

<tr>

<td colspan="3">TABLE HEADING</td>

</tr>

</thead>

<tbody>

<tr>

<td class="first" colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

</tr>

</tbody>

</table>

And here is the jQuery I am using:

<script type="text/javascript" language="javascript">

$(document)ready(function () {

$("thead")click(function () {

$(this)next("tbody")slideToggle("slow");

}

)

});

</script>

解决方案

It disappears because <tbody> normally will get no shorter than the tallest td, no matter what you set its height to with CSS

This is why the natural-height tbody just seems to disappear, while the one with artificial extra-height appears to run until the tr reached its natural height

You can kludge around this with tbody {display:block;} See the kludge at jsFiddle

But, notice the effect that has when a table height is set

Probably, the best way is to wrap the whole table in a div and slideToggle that, like so:

<table class="AbbyNormal">

<thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>

</table>

<div class="tableWrap">

<table class="AbbyNormal">

<tbody>

<tr>

<td class="first" colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

<td colspan="1">Cell Contents</td>

</tr>

</tbody>

</table>

</div>

Just be sure and fix the table widths the same

See it in action at jsFiddle

这篇关于jQuery slideToggle在一个包含thead和tbody元素的表格上。

jQuery 不直接支持鼠标滑轮事件，有一个插件叫做 jQuery Mousewheel，你可以 Google 一下

但用原生 JavaScript 也可以轻松来实现

<script type="text/javascript">

// 鼠标滑轮滚动后执行的函数

// delta > 0 = 向上滚动

// delta < 0 = 向下滚动

function mousewheelEvent(e, delta) {

    documentgetElementById("debug")innerHTML += (delta + "<br />");

    // 其它代码

}

            

if (documentattachEvent) {

    documentattachEvent("onmousewheel", function(e) {

        mousewheelEvent(e, ewheelDelta);

    });

}

else if (documentaddEventListener) {

    documentaddEventListener("DOMMouseScroll", function(e) {

        mousewheelEvent(e, edetail -40);

    }, false);

}

</script><body style="height: 3000px">

<div id="debug" style="position: fixed"></div>

1、新建一个html文件，命名为testhtml。

2、在testhtml文件内，使用div标签创建一个模块，并设置其id为mycss。

3、在css标签内，定义div的样式，设置其宽度为100px，高度为2000px，背景颜色为粉红色。

4、在js标签内，使用scroll()方法监听页面的滚动条，并执行function方法。

5、在function方法内，使用if语句判断，当前滚动的位置（scrollTop()）是否到达页面的底部（$(document)height()-$(window)height()），如果到达页面底部，提示“已经到底部了”。

这个不难弄···

事先获取div的offset和它的高度··然后加起来··然后你在$(window)scroll(function(){});中判断当前滚动的高度是否等于高度+offsettop·如果等于的话·你就把div设置为position:fixed;

然后再给它一个top就可以了