滚动到一个DIV使用jquery滚动到一个DIV使用jquery(Scroll to a div u

2019-06-17 10:39发布

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

谢谢您的帮助

Answer 1:

首先,你的代码不包含contact DIV,它有一个contacts的div!

在侧边栏你contact你在页面的底部在div contacts 。 我除去最后一次s的代码示例。 (您还拼错了projectslink在侧边栏的ID)。

其次,来看看一些为例子点击了jQuery参考页面上。 你必须使用像点击, object.click( function() { // Your code here } ); 为了Click事件处理程序绑定到对象....就像下面的示例所示。 顺便说一句,你也可以只是使用它不带任何参数,如触发对象上的点击object.click()

第三, scrollTo是一个插件 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);
});

活生生的例子

(滚动至拍摄功能在这里 )


PS:很明显,你应该有一个令人信服的理由去,而不是使用锚标记这条路线<a href="#gohere">blah</a> ...... <a name="gohere">blah title</a>



Answer 2:

没有.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 functions.animate() 所以,你可能平滑滚动的东西。

参考: .scrollTop() , .POSITION() , .offset()



Answer 3:

你可以试试 :

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


Answer 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);
    });
  }
});


Answer 5:

OK家伙,这是一个小的解决方案,但它工作正常。

假设下面的代码:

<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的。员额)到最后一个想聊天。 所以,做每当一个新的。员额被添加到主分区持有人的情况如下:

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


Answer 6:

首先获得高达其中U希望通过jQuery的位置()方法,以滚动的div元素的位置。
例如
然后得到与“ 赛拓朴 ”方法,其元件的y cordinates(高度)。
例如:pos.top;
然后拿到那div元素的x cordinates用“ 左 ”的方法。
这些方法源于CSS定位。
一旦我们得到X&Y cordinates,那么我们就可以使用JavaScript的scrollTo(); 方法。
此方法滚动高达特定的高度和宽度的文档。
它有两个参数作为X和Y cordinates。 语法:window.scrollTo(X,Y);
然后,只需通过在scrollTo()函数DIV元素的X和Y cordinates。
请参阅下面↓↓的例子

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


文章来源: Scroll to a div using jquery
标签: jquery scroll