<!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>浏览器滚动条滑动 by 彭成刚 20120917</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script> $(window).scroll( function(e) { }); $(window).mousedown( function(e) { e = e || window.event; if("[object HTMLHtmlElement]" == e.target)//当鼠标点击滚动条的时候 清空动画 { //alert(e.target); clearInterval(intervalID); } }); var upOrDown = null; var intervalID = null; function bindgundong() { var isFF = navigator.userAgent.toLowerCase().indexOf("firefox")>=0; if (isFF) { window.addEventListener('DOMMouseScroll', function (e) { upOrDown = e.detail < 0 ? "up" : "down"; scrollHander(); e.preventDefault(); }, false); } else { window.onmousewheel = document.onmousewheel = function (e) { e = e || window.event; upOrDown = e.wheelDelta > 0 ? "up" : "down"; scrollHander(); e.returnValue = false; } } } function scrollHander() { clearInterval(intervalID); var tar = $(window).scrollTop() + 180 * (upOrDown == "up" ? -1 : 1); intervalID = setInterval(function () { $(window).scrollTop($(window).scrollTop() + (tar - $(window).scrollTop()) * 0.1); if (tar == $(window).scrollTop()) { clearInterval(intervalID); } }, 10); } $(window).ready(function(){ // 在这里写你的代码... bindgundong(); }); </script> </head> <body> <div id="nlog" style=" position:fixed; left:0; top:0;">当前位置：1</div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>0</p> </body> </html>