Question

所以我有一个页面，侧面有一个固定的链接栏。我想滚动到不同的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>

感谢您的帮助

Answer 1

首先，您的代码不包含contact div，它有一个contacts div！

在侧边栏中，您在contact页面底部的div中有contacts。我删除了代码示例的最终s。（你也拼错了边栏中的projectslink id。

其次，在jQuery参考页面上查看click的一些示例。您必须使用click 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);
});

Live Example

~~（滚动到从here获取的功能）~~

PS：显然你应该有一个令人信服的理由去这条路线而不是使用锚标签<a href="#gohere">blah</a> ...... <a name="gohere">blah title</a>

Answer 2

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()

Answer 3

你可以尝试：

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});

Answer 4

添加此小函数并将其用作：$('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);
    });
  }
});

Answer 5

好的伙计们，这是一个小解决方案，但它运行正常。

假设以下代码：

<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'));

Answer 6

首先获取你希望通过jQuery position（）方法滚动的div元素的位置。
示例： var pos = $（＆＃34; div＆＃34;）。position（）; 的
然后用＆＃34; .top ＆＃34;获得该元素的y坐标（高度）。方法。
例子：pos.top;
然后使用＆＃34; .left ＆＃34;获取该div元素的x cordinates。方法。
这些方法源于CSS定位一旦我们得到x＆amp; y cordinates，然后我们可以使用javascript＆＃39> scrollTo（）; 方法。
该方法将文件滚动到特定高度＆amp;宽度。
它采用x和amp;两个参数。坐下来。语法： window.scrollTo（x，y）;
然后通过x＆amp; y scrollTo（）函数中的DIV元素的坐标。
参考下面的例子↓↓

def linear_search(array, name)
  return array.index(name).nil? ? -1 : array.index(name)
end 

linear_search(students, "Kyle") # 0
linear_search(students, "Monkey Boy") # 3
linear_search(students, "Monkey") # -1

Answer 7

也不需要这些。只需将 div ID 添加到标记的

<li><a id = "aboutlink" href="#about">auck</a></li>

就是这样。

使用jquery滚动到div

7 个答案: