使用jQuery滚动到一个div

205

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

谢谢您的帮助

jquery  scroll 
— 沙克
source
html看起来应该是什么样的联系链接？
— 詹姆斯·布莱克
— James Black，2010年
3
您是否有理由使用jQuery而不是普通的旧锚？
— brianpeiris
2
@James-并不是真的重复。此问题将页面滚动到特定的div。该问题以定义的增量滚动页面（与显示的div无关）。
— 彼得·阿杰泰
这真的很好：css-tricks.com/snippets/jquery/smooth-scrolling。为我工作。
— maahd 2015年

Answers:

342

首先，您的代码不包含contactdiv，而是包含contactsdiv！

在侧边栏中，您contact位于页面底部的div中contacts。我删除了s代码示例的最终版本。（您projectslink在侧边栏中还拼错了ID）。

其次，看一下一些单击 jQuery参考页面上的示例。object.click( function() { // Your code here } );为了将click事件处理程序绑定到对象，您必须使用click like，就像在下面的示例中一样。顺便说一句，您也可以通过使用不带参数的对象来触发对象的点击，例如object.click()。

第三，scrollTo是jQuery中的插件。我不知道您是否安装了插件。scrollTo()没有插件，您将无法使用。在这种情况下，您所需的功能只有两行代码，因此我认为没有理由使用该插件。

好的，现在解决。

如果单击侧边栏中的链接，则下面的代码将滚动到正确的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>

— 彼得·阿吉泰
source
很高兴知道它会有所帮助，但是我认为您的意思是“挑剔”，尽管我发现吃它们比摆脱它们更好。
— 彼得·阿杰泰
第一次单击时不会滚动。：/我第二次单击它，它可以工作。
— BurakKarakuş2014年
我认为将ID放入这样的href更为合理：href =“＃about” jsfiddle.net/onigetoc/w5muyern
— Gino
第一次不起作用。但是，当我们单击第二次时，它可以完美运行。
— Satish Singh
115

.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 functionslike 一起使用.animate()。因此，您可以平滑滚动某些内容。

参考：.scrollTop（） ，.POSITION（） ，.offset（）

— 安迪
source
恐怕我仍然有类似的问题。该页面加载量是在页面上向下滚动一定量的，而不是联系人div的，并且该链接也无法将我带到联系人div。谢谢。编辑：说我用顶部与CSS隔开div，这会导致它去错地方吗？只是一个想法。
— tshauck 2010年
22

你可以试试 ： 

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

添加此小功能并按以下方式使用它： $('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);
    });
  }
});
— 瑞安
source
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）滚动到最后一个，就像聊天一样。因此，每当新的.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'));
— 基督教
source
3

首先通过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）
source
干草添加一些文字说明您所做的事情，只是没有太大意义。
— 克莱恩·西尔瓦
正如@ClainDsilva所说，请添加一些文字说明。
— SreekanthGS 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.