使用jQuery滚动到一个div

Question

使用jQuery滚动到一个div

213

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

- tshauck

联系链接应该在HTML中是什么样子？ - James Black

这可能是 https://dev59.com/H3M_5IYBdhLWcg3w3nRs 的重复。 - James Black

3

你为什么要使用jQuery而不是普通的锚点？ - brianpeiris

2

@James - 这并不是完全重复的问题。这个问题会滚动页面到特定的div。那个问题按定义的增量滚动页面（无论显示哪些div）。 - Peter Ajtai

这真的很好：https://css-tricks.com/snippets/jquery/smooth-scrolling/。对我有用。 - maahd

7个回答

120

jQuery中没有.scrollTo()方法，但有一个.scrollTop()方法。 .scrollTop需要一个参数，即滚动条应滚动到的像素值。

示例：

$(window).scrollTop(200);

如果窗口中有足够的内容，它将滚动窗口。

因此，您可以使用.offset()或.position()函数来获取所需的值。

示例：

$(window).scrollTop($('#contact').offset().top);

这应该会将#contact元素滚动到视图中。

非jQuery的替代方法是.scrollIntoView()。你可以在任何DOM元素上调用该方法，例如：

$('#contact')[0].scrollIntoView(true);

true代表元素位于视图顶部，而false则将其置于视图底部。jQuery方法的好处在于，你甚至可以将它与fx函数一起使用，例如.animate()。因此，你可以平滑地滚动某些内容。

参考资料：.scrollTop()，.position()，.offset()

- jAndy

我恐怕仍然遇到类似的问题。页面加载时会滚动到页面的某个位置，而不是联系人div，链接也不会将我带到联系人div。谢谢。编辑：假设我正在使用CSS中的顶部间距来分隔div，这会导致它进入错误的位置吗？只是一个想法。 - tshauck

22

你可以尝试：

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

- Dũng IT

14

添加这个小函数，然后像这样使用：$('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);
    });
  }
});

- Ryan

6

好的，这是一个简单的解决方案，但它很有效。

假设以下代码：

<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）滚动到最后一个，就像聊天一样。因此，每当向主div容器添加新的.post时，请执行以下操作：

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));

- christian

4

首先使用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>

- Sayyed Salman

并且，你需要添加一些文本解释你所做的事情，否则它就没有太多意义了..!! - Clain Dsilva

正如@ClainDsilva所说，请添加一些文本解释。 - SreekanthGS

-1

不需要太多的步骤。只需要将div id添加到<a>标签的href属性中

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

就像那样。

- Armin Akhlagh

请详细说明一下。这对我没有起作用。 - Ifesinachi Bryan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Ajtai · Accepted Answer

首先，你的代码中没有一个名为contact的div，但有一个名为contacts的div！

在侧边栏中，你使用了contact，而在页面底部的div中，你使用了contacts。我在代码示例中删除了最后的s。（你还拼错了侧边栏中的projectslink id）。

其次，请查看 jQuery 参考页面上关于click的一些示例。你必须像下面这样使用 click： 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>