使用jQuery滚动到一个div

所以我有一个页面，在侧面有一个固定的链接栏。我想滚动到不同的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中没有. scrollto()方法，但有. scrolltop()方法。. scrolltop需要一个参数，即滚动条应该滚动到的像素值。

例子:

$(window).scrollTop(200);

将滚动窗口(如果其中有足够的内容)。

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

例子:

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

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

非jquery的替代方法是. scrollintoview()。你可以在任何DOM元素上调用这个方法，比如:

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

True表示该元素位于视图的顶部，而false则将其置于视图的底部。jQuery方法的优点是，您甚至可以将它用于.animate()等fx函数。你可以平滑滚动一些东西。

参考:.scrollTop()， .position()， .offset()

2010-08-08 01:02:53

首先，你的代码不包含一个联系人div，它有一个联系人div!

在侧边栏你有联系在div在页面底部你有联系人。我删除了代码示例的最后一个s。(您还在侧栏中拼错了projectslink id)。

其次，看一下在jQuery参考页面上单击的一些示例。你必须使用click like, object。点击(function(){//你的代码在这里});为了将单击事件处理程序绑定到对象....就像在下面的例子中。顺便说一句，您也可以不带参数地使用对象来触发对对象的单击，如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> .

2010-08-08 01:17: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);
    });
  }
});

2010-08-08 02:27:07

好吧，伙计们，这是一个小的解决方案，但它很有效。

假设有以下代码:

<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 holder时，请执行以下操作:

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

2013-03-20 01:58:47

你可以试试:

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

2014-08-25 14:03:19

First get the position of the div element upto which u want to scroll by jQuery position() method. Example : var pos = $("div").position(); Then get the y cordinates (height) of that element with ".top" method. Example : pos.top; Then get the x cordinates of the that div element with ".left" method. These methods are originated from CSS positioning. Once we get x & y cordinates, then we can use javascript's scrollTo(); method. This method scrolls the document upto specific height & width. It takes two parameters as x & y cordinates. Syntax : window.scrollTo(x,y); Then just pass the x & y cordinates of the DIV element in the scrollTo() function. Refer the example below ↓ ↓

<!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>

2015-04-26 06:41:11

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

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

就像这样。

2019-06-09 02:43:57

使用jQuery滚动到一个div

推荐文章

最新文章

标签