使用 jQuery 滚动到一个 div答案

【问题标题】：Scroll to a div using jQuery使用 jQuery 滚动到一个 div
【发布时间】：2011-03-26 20:22:33
【问题描述】：

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

【问题讨论】：

联系链接应该在哪里的 html 是什么样的？
这可能与stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery重复
你使用jQuery而不是普通的旧锚有什么原因吗？
@James - 这不是真正的重复。这个问题将页面滚动到特定的 div。该问题以定义的增量滚动页面（与显示的 div 无关）。
这真的很好：css-tricks.com/snippets/jquery/smooth-scrolling。为我工作。

标签： jquery scroll

【解决方案1】：

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

在侧边栏中你有contact 在页面底部的 div 中你有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);
});

Live Example

~~（滚动到取自here的函数）~~

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

【讨论】：

很高兴知道它有帮助，但我认为您的意思是“泡菜”，尽管我发现吃它们比吃掉它们更好。
第一次点击不滚动。 :/ 我第二次点击它就可以了。
我觉得把ID放到href这样更合乎逻辑：href="#about" jsfiddle.net/onigetoc/w5muyern
第一次不行。但是当我们第二次点击时，它就完美地工作了。
非常感谢您在这里分享解决方案，它节省了我的时间并摆脱了紧张

【解决方案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()

【讨论】：

恐怕我还有类似的问题。页面加载向下滚动页面一定量，而不是联系人 div，并且链接也不会将我带到联系人 div。谢谢你。编辑：假设我使用带有 css 的 top 将 div 隔开，这会导致它去错误的地方吗？只是一个想法。

【解决方案3】：

你可以试试：

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

【讨论】：

【解决方案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);
    });
  }
});

【讨论】：

【解决方案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'));

【讨论】：

【解决方案6】：

首先通过 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>

【讨论】：

还有干草添加一些文字解释你做了什么，只是没有多大意义..!!
正如@ClainDsilva 所说，请添加一些文字说明。

【解决方案7】：

这些也不需要。只需简单地将 div id 添加到标签的 href

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

就这样。

【讨论】：

请多解释一下。它对我不起作用。