使用jQuery滚动到一个div [英] Scroll to a div using jquery
问题描述
所以我有一个页面，该页面的侧面有一个固定的链接栏.我想滚动到不同的div.基本上，该页面只是一个较长的网站，我想使用侧面的菜单框滚动到不同的div.
so I have a page that has a fixed link bar on the side. I'd like to scroll to the different divs. Basically the page is just one long website, where I'd like to scroll to different divs using the menu box to the side.
这是我到目前为止拥有的jQuery
Here is the jquery I have so far
$(document).ready(function() {
$('#contactlink').click = function() {
$(document).scrollTo('#contact');
}
});
问题是它会在加载时自动转到联系人div，然后当我按菜单中的#contactlink时，它会滚动回到顶部.
The issue is it is automatically going to the contact div when it loads, then when I press the #contactlink in the menu it scrolls back to the top.
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！
First, your code does not contain a contact div, it has a contacts div!
在边栏中，您在页面底部的div中具有contact，具有contacts.我删除了代码示例的最终s. (您还在侧边栏中拼错了projectslink ID).
In sidebar you have contact in the div at the bottom of the page you have contacts. I removed the final s for the code sample. (you also misspelled the projectslink id in the sidebar).
第二，看看jQuery参考页面上 click 的一些示例.为了将click事件处理程序绑定到对象，您必须使用click like object.click( function() { // Your code here } );.类似于下面的示例.顺便说一句，您也可以使用不带参数的对象(例如object.click())来触发对对象的点击.
Second, take a look at some of the examples for click on the jQuery reference page. You have to use click like, object.click( function() { // Your code here } ); in order to bind a click event handler to the object.... Like in my example below. As an aside, you can also just trigger a click on an object by using it without arguments, like object.click().
第三，scrollTo是jQuery中的插件.我不知道您是否安装了插件.没有插件，就不能使用scrollTo().在这种情况下，您所需的功能只有两行代码，因此我认为没有理由使用该插件.
Third, scrollTo is a plugin in jQuery. I don't know if you have the plugin installed. You can't use scrollTo() without the plugin. In this case, the functionality you desire is only 2 lines of code, so I see no reason to use the plugin.
好的，现在解决.
如果单击侧边栏中的链接，则下面的代码将滚动到正确的div.窗口必须足够大以允许滚动:
The code below will scroll to the correct div if you click a link in the sidebar. The window does have to be big enough to allow scrolling:
// 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);
});
( Scroll to function taken from here )
PS:显然，您应该有一个令人信服的理由走这条路线，而不是使用锚标签<a href="#gohere">blah</a> ... <a name="gohere">blah title</a>
PS: Obviously you should have a compelling reason to go this route instead of using anchor tags <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>
这篇关于使用jQuery滚动到一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
