所以我有一个页面,侧面有一个固定的链接栏.我想滚动到不同的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>
谢谢您的帮助
Pet*_*tai 335
首先,你的代码不包含contactdiv,它有一个contactsdiv!
在侧边栏中,您拥有contact页面底部的div contacts.我删除了s代码示例的最终版本.(你也拼错projectslink了边栏中的id).
其次,看一下点击 jQuery参考页面的一些例子.您必须使用click like,object.click( function() { // Your code here } );以便将click事件处理程序绑定到对象....就像在下面的示例中一样.顺便说一句,你也可以通过使用没有参数的对象来触发对象的点击,比如object.click().
第三,scrollTo是jQuery中的一个插件.我不知道你是否安装了这个插件.scrollTo()没有插件你就无法使用.在这种情况下,您所需的功能只有2行代码,因此我认为没有理由使用该插件.
好的,现在开始解决方案了.
如果单击侧栏中的链接,下面的代码将滚动到正确的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);
});
(滚动到此处的功能)
PS:显然你应该有一个令人信服的理由去这条路线而不是使用锚标签<a href="#gohere">blah</a>......<a name="gohere">blah title</a>
jAn*_*ndy 111
.scrollTo()jQuery中没有方法,但有.scrollTop()一个方法..scrollTop需要一个参数,即滚动条应滚动到的像素值.
例:
$(window).scrollTop(200);
将滚动窗口(如果有足够的内容).
所以你可以用.offset()或得到这个理想的值.position().
例:
$(window).scrollTop($('#contact').offset().top);
这应该将#contact元素滚动到视图中.
非jQuery替代方法是.scrollIntoView().您可以在以下任何方式调用该方法DOM element:
$('#contact')[0].scrollIntoView(true);
true表示元素位于顶部,而false将其放置在视图的底部.与jQuery的方法的好处是,你甚至可以用它fx functions喜欢.animate().所以你可以顺利滚动一些东西.
参考:.scrollTop() ,.POSITION() ,.offset()
IT *_*ogs 22
你可以试试 :
$("#MediaPlayer").ready(function(){
$("html, body").delay(2000).animate({
scrollTop: $('#MediaPlayer').offset().top
}, 2000);
});
Rya*_*yan 12
添加这个小函数并使用它: $('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);
});
}
});
好的家伙,这是一个小解决方案,但它工作正常.
假设以下代码:
<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>
你想要一个新的帖子被添加到'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'));