JQuery控制滚动条滚动到指定位置

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .redMark{
 8             color: red;
 9             font-weight: bold;
10         }
11         .blueMark{
12             color: blue;
13             font-weight: bold;
14         }
15     </style>
16     <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
17     <script>
18             function scrollToError() {
19                 var body = $(‘html,body‘);
20                 var scroll_1 = $(‘.try‘).first();
21                 var scroll_2 = $(‘#test‘);
22                 if(scrollTo.length) {
23                     body.animate({scrollTop:scroll_1.offset().top - 100 }, 2000);
24                     body.animate({scrollTop:scroll_2.offset().top - 100 }, 2000);
25                 }
26             }
27     </script>
28 </head>
29 <body>
30     <p>Hello World!</p>
31     <p>Hello World!</p>
32     <p>Hello World!</p>
33     <p>Hello World!</p>
34     <p>Hello World!</p>
35     <p>Hello World!</p>
36     <p>Hello World!</p>
37     <p>Hello World!</p>
38     <p>Hello World!</p>
39     <p>Hello World!</p>
40     <p>Hello World!</p>
41     <p>Hello World!</p>
42     <p class=‘try redMark‘>Hello World!</p>
43     <p>Hello World!</p>
44     <p>Hello World!</p>
45     <p>Hello World!</p>
46     <p>Hello World!</p>
47     <p>Hello World!</p>
48     <p>Hello World!</p>
49     <p>Hello World!</p>
50     <p>Hello World!</p>
51     <p>Hello World!</p>
52     <p>Hello World!</p>
53     <p>Hello World!</p>
54     <p>Hello World!</p>
55     <p id=‘test‘ class=‘blueMark‘>Hello World!</p>
56     <p>Hello World!</p>
57     <p>Hello World!</p>
58     <p>Hello World!</p>
59     <p>Hello World!</p>
60     <p>Hello World!</p>
61     <p>Hello World!</p>
62     <p>Hello World!</p>
63     <p>Hello World!</p>
64     <p>Hello World!</p>
65     <p>Hello World!</p>
66     <p>Hello World!</p>
67     <p>Hello World!</p>
68     <p class=‘try redMark‘>Hello World!</p>
69     <p>Hello World!</p>
70     <p>Hello World!</p>
71     <p>Hello World!</p>
72     <p>Hello World!</p>
73     <p>Hello World!</p>
74     <p>Hello World!</p>
75     <p>Hello World!</p>
76     <p>Hello World!</p>
77     <p>Hello World!</p>
78     <input type="submit" onclick="scrollToError()" value="Scroll Action"/>
79 </body>
80 </html>

更多参考：http://www.cnblogs.com/yichengbo/archive/2011/10/24/2222638.html

时间： 2024-08-06 03:45:35

JQuery控制滚动条滚动到指定位置的相关文章

jquery操作滚动条滚动到指定位置

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn1").click(function(){ $("div").

代码如下(主要是通过设置Location的hash属性): <!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> <

DIV内滚动条滚动到指定位置

相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ps:obj是需要定位的对象,speed是滚动的速度然而如果需要相对某一个容器(称之div1),将其内部的div2滚动到相对div1的指定位置,用法如下: $("div1").animate({scrollTop: $("div2").position().top}

滚动条滚动到指定位置

function scrollToCenter(){ var div = $("#canvas-wrap"); var top = (div[0].scrollHeight - div.height()) / 2; div[0].scrollTop = top; }

实现滚动条滚动到指定位置时,滑入显示某个元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .test{ margin:900px auto 500px; width:800px; height:600px; position: relati

js滚动到指定位置导航栏固定顶部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0;} .banner{height: 250px; width: 100%; bac

监听页面滚动及滚动到指定位置

两种监听页面滚动的方法一.原生js通过window.onscroll监听window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log("滚动距离" + scrollTop);} 二.Jquery通过$(wind

jQuery 随滚动条滚动效果（适用于内容页长文章）

直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox">

jQuery 随滚动条滚动效果（固定版）

//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"