代码之家 › 专栏 › 技术社区 › tshauck

使用jquery滚动到div

scroll jquery

190

tshauck · 技术社区 · 16 年前

这是我到目前为止的jQuery

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

问题是当它加载时会自动转到contact div,然后当我按下 #contactlink 在菜单中,它会滚动回顶部。

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

6 回复 | 直到 5 年前

353

Syscall - leaving SO... Juhzuri 5 年前

首先,您的代码不包含 contact div,它有一个 contacts 迪夫!

接触 联络 . 我取消了决赛 s 对于代码示例(你还拼错了 projectslink 侧边栏中的id)。

第二,看一些例子 click object.click( function() { // Your code here } ); 为了将click事件处理程序绑定到对象。。。。就像我下面的例子。另一方面,您也可以通过在没有参数的情况下使用对象来触发对对象的单击,如 object.click() .

scrollTo 是一个 plugin 在jQuery中。我不知道你是否安装了插件。你不能使用 scrollTo() 没有插件。在本例中,您需要的功能只有2行代码,因此我认为没有理由使用该插件。

好的,现在开始解决问题。

// 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 )~~

<a href="#gohere">blah</a> <a name="gohere">blah title</a>

119

Syscall - leaving SO... Juhzuri 5 年前

根本没有 .scrollTo() .scrollTop() 一个。 .scrollTop 需要一个参数,即滚动条应该滚动到的像素值。

$(window).scrollTop(200);

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

所以你可以用 .offset() 或 .position()

例子:

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

这将滚动 #contact

非jQuery替代方法是 .scrollIntoView() . 你可以在任何情况下调用这个方法 DOM element 比如:

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

true false fx functions 喜欢 .animate()

参考文献: .scrollTop() , .position() , .offset()

DÅ©ng IT 11 年前

您可以尝试:

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

Ryan 16 年前

添加这个小函数并按如下方式使用: $('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);
    });
  }
});

christian 13 年前

好的,伙计们,这是一个小的解决方案,但它工作得很好。

假设以下代码:

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

当一个新的帖子被添加到“thedivholder”中时,它会像聊天一样滚动它的内部内容(the div's.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'));

Sayyed Salman 11 年前

例子:
然后得到该元素的y坐标(高度) .顶部 “方法。
示例:pos.top;
.左 “方法。

滚动到();
此方法将文档滚动到特定高度;宽度。
它采用两个参数作为x&可的松。语法: 窗口。滚动到(x,y);
然后把x&传过去;中DIV元素的y cordinate 滚动到() 功能。
请参阅下面的示例↓ ↓

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

-1

Armin Akhlagh 7 年前

不需要太多这些。只需添加 部门id 到 a的href<a>标签

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

就这样。