使用jquery滚动到div
所以我有一个页面上有一个固定的链接栏。 我想滚动到不同的div。 基本上这个页面只是一个很长的网站，我想用菜单框来滚动到不同的div。 这是我到目前为止的jQuery
$(document).ready(function() { $('#contactlink').click = function (){ $(document).scrollTo('#contact'); } }); 问题是它会在加载时自动进入联系div，然后当我按菜单中的#contactlink时，它会滚动回顶部。
编辑：HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- jQuery--> <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script> <!-- .js file--> <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script> <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" /> <!-- .css for page --> <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/> <!-- page title--> <title><!-- Insert Title --></title> </head> <body> <div id="container"> <div id="sidebar"> <ul> <li><a id = "aboutlink" href="#">auck</a></li> <li><a id = "peojectslink" href="#">Projects</a></li> <li><a id = "resumelink" href="#">Resume</a></li> <li><a id = "contactlink" href="#">Contact</a></li> </ul> </div> <div id="content"> <div class="" id="about"> <p class="header">uck</p> <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="sections"id="projects"> <p class = "header">Projects</p> <p class="info">Projects</p> </div> <div class="sections" id="resume"> <p class = "header">Resume</p> <p class="info">Resume</p> </div> <div class="sections" id="contacts"> <p class = "header">Contact</p> <p class="info">Contact</p> </div> </div> </div> </body>
谢谢您的帮助
首先， 你的代码不包含contact div，它有一个contacts div！
在侧边栏中，您有在contacts页面底部的div的contacts 。 我删除了代码示例的最后s 。 （你也拼错在侧边栏中的projectslink ID）。
其次，看看点击 jQuery参考页面的一些例子。 你必须使用click， object.click( function() { // Your code here } ); 为了绑定一个点击事件处理程序的对象….就像我在下面的例子。 object.click() ，你也可以通过使用它而不使用参数来触发对象的点击，比如object.click() 。
第三， scrollTo是jQuery中的一个插件 。 我不知道你是否安装了插件。 没有这个插件，你不能使用scrollTo() 。 在这种情况下，你想要的function只有2行代码，所以我没有理由使用插件。
好的，现在到一个解决scheme。
下面的代码将滚动到正确的div如果你点击边栏中的链接。 该窗口必须足够大才能滚动：
// This is a functions that scrolls to #{blah}link function goToByScroll(id){ // Remove "link" from the ID id = id.replace("link", ""); // Scroll $('html,body').animate({ scrollTop: $("#"+id).offset().top}, 'slow'); } $("#sidebar > ul > li > a").click(function(e) { // Prevent a page reload when a link is pressed e.preventDefault(); // Call the scroll function goToByScroll(this.id); });
现场示例
（从这里滚动到function）
PS：显然你应该有一个令人信服的理由去这条路线，而不是使用锚标签<a href="#gohere">blah</a> … <a name="gohere">blah title</a>
jQuery中没有.scrollTo()方法，但有一个.scrollTop() 。 .scrollTop需要一个参数，即滚动条应滚动到的像素值。
例：
$(window).scrollTop(200);
将滚动窗口（如果有足够的内容）。
所以你可以用.offset()或.position()来得到这个期望的值。
例：
$(window).scrollTop($('#contact').offset().top);
这应该将#contact元素滚动到视图中。
非jQuery替代方法是.scrollIntoView() 。 您可以在任何DOM element上调用该方法，如：
$('#contact')[0].scrollIntoView(true);
true表示元素位于顶部，而false将其放置在视图的底部。 jQuery方法的.animate()在于，您甚至可以将它与fx functions如.animate() 。 所以你可以顺利滚动一些东西。
参考： .scrollTop（） ，.position（） ，.offset（）
你可以试试 ：
$("#MediaPlayer").ready(function(){ $("html, body").delay(2000).animate({ scrollTop: $('#MediaPlayer').offset().top }, 2000); });
添加这个小函数，并使用它： $('div').scrollTo(500);
jQuery.fn.extend( { scrollTo : function(speed, easing) { return this.each(function() { var targetOffset = $(this).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } });
好吧，这是一个小解决scheme，但它工作正常。
假设下面的代码：
<div id='the_div_holder' style='height: 400px; overflow-y: scroll'> <div class='post'>1st post</div> <div class='post'>2nd post</div> <div class='post'>3rd post</div> </div>
你想要一个新的post被添加到'the_div_holder'，然后滚动它的内部内容（div的.post）到最后一个聊天。 因此，每当将一个新的.post添加到主div持有者时，请执行以下操作：
var scroll = function(div) { var totalHeight = 0; div.find('.post').each(function(){ totalHeight += $(this).outerHeight(); }); div.scrollTop(totalHeight); } // call it: scroll($('#the_div_holder'));
首先获取div元素的位置，使其通过jQuery position（）方法进行滚动。
例如： var pos = $（“div”）。position（）;
然后用“ .top ”方法获得该元素的y坐标（高度）。
例如：pos.top;
然后用“ .left ”方法得到div元素的x 坐标 。
这些方法来源于CSS定位。
一旦我们得到了x和y坐标，那么我们可以使用javascript的scrollTo（）; 方法。
此方法将文档滚动到特定的高度和宽度。
它需要两个参数作为x和y坐标。 语法： window.scrollTo（x，y）;
然后在scrollTo（）函数中传递DIV元素的x＆y坐标。
请参阅下面的示例↓↓
<!DOCTYPE HTML> <html> <head> <title> Scroll upto Div with jQuery. </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function () { $("#button1").click(function () { var x = $("#element").position(); //gets the position of the div element... window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position.... //it takes 2 parameters : (x axis cordinate, y axis cordinate); }); }); </script> </head> <body> <button id="button1"> Click here to scroll </button> <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;"> The DIV element. </div> </body> </html>
