所以我有一个侧面有一个固定链接栏的页面。我想滚动到不同的 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！
在侧边栏中，您在页面底部的 div 中有 contact，您有 contacts。我删除了代码示例的最后一个 s。 （您还在边栏中拼错了 projectslink id）。
其次，查看 jQuery 参考页面上 click 的一些示例。您必须使用 click like，object.click( function() { // Your code here } ); 才能将 click 事件处理程序绑定到对象......就像下面的示例一样。顺便说一句，您也可以通过使用不带参数的对象来触发对对象的点击，例如 object.click()。
第三，scrollTo 是 jQuery 中的 plugin。不知道你有没有安装插件。没有插件就不能使用 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);
});
（滚动到从 here 获取的函数）
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 方法的好处是，您甚至可以将它与 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);
});
}
});
好的，这是一个小解决方案，但效果很好。
假设以下代码：
<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'));
首先通过 jQuery position() 方法获取你想要滚动到的 div 元素的位置。示例：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>
这些也不需要。只需简单地将 div id 添加到 标签的 href
<li><a id = "aboutlink" href="#about">auck</a></li>
就这样。
关注公众号
不定期副业成功案例分享
