เลื่อนไปที่ div โดยใช้ jquery

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

— tshauck
แหล่งที่มา

html นั้นมีหน้าตาเป็นอย่างไรสำหรับลิงค์ของที่อยู่ติดต่อ

— James Black

นี่อาจซ้ำกับstackoverflow.com/questions/1193414/scrolling-a-div-with-jquery

— James Black

3

มีเหตุผลที่คุณใช้ jQuery แทนแองเคอร์เก่าธรรมดาหรือไม่?

— brianpeiris

2

@James - มันไม่ได้ซ้ำกันจริงๆ คำถามนี้เลื่อนหน้าไปยัง div ที่เฉพาะเจาะจง คำถามนั้นเลื่อนหน้าเว็บโดยการเพิ่มขึ้นตามที่กำหนด (โดยไม่คำนึงถึงสิ่งที่ divs แสดง)

— Peter Ajtai

นี้เป็นสิ่งที่ดีจริงๆ: css-tricks.com/snippets/jquery/smooth-scrolling ทำงานให้ฉัน

— maahd

342

ขั้นแรกรหัสของคุณไม่มีcontactdiv มันมีcontactsdiv!

ในแถบด้านข้างคุณมีcontactใน div contactsที่ด้านล่างของหน้าเว็บที่คุณมี ฉันลบขั้นสุดท้ายsสำหรับตัวอย่างโค้ด (คุณสะกดprojectslinkรหัสในแถบด้านข้างด้วย)

ขั้นที่สองดูตัวอย่างบางส่วนสำหรับการคลิกที่หน้าอ้างอิง jQuery คุณต้องใช้คลิกเช่นobject.click( function() { // Your code here } );เพื่อผูกตัวจัดการเหตุการณ์คลิกกับวัตถุ .... เช่นในตัวอย่างของฉันด้านล่าง 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>

— ปีเตอร์ Ajtai
แหล่งที่มา

ดีใจที่รู้ว่ามันช่วยได้ แต่ฉันคิดว่าคุณหมายถึง "ดอง" แต่ฉันคิดว่ามันดีกว่าที่จะกินพวกเขาดีกว่าออกไปจากพวกเขา

— ปีเตอร์ Ajtai

มันไม่เลื่อนเมื่อคลิกครั้งแรก : / ฉันคลิกมันเป็นครั้งที่สองและใช้งานได้

— Burak Karakuş

ฉันคิดว่ามันมีเหตุผลมากขึ้นที่จะนำ ID ไปยัง href เช่นนี้: href = "# about" jsfiddle.net/onigetoc/w5muyern

— Gino

มันไม่ทำงานในครั้งแรก แต่เมื่อเราคลิกครั้งที่ 2 มันก็ทำงานได้อย่างสมบูรณ์

— 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 functions .animate()ดังนั้นคุณอาจเลื่อนสิ่งที่ราบรื่น

การอ้างอิง: .scrollTop () , .position () , .offset ()

— Jandy
แหล่งที่มา

ฉันเกรงว่าฉันยังคงมีปัญหาที่คล้ายกัน หน้าโหลดเลื่อนหน้าลงในจำนวนหนึ่งไม่ติดต่อ div tho และลิงค์ไม่ได้พาฉันไปที่ div ติดต่อเช่นกัน ขอบคุณมาก แก้ไข: ว่าฉันเว้นวรรค divs โดยใช้ด้านบนกับ css นี้จะทำให้ไปผิดที่หรือไม่ แค่ความคิด

— tshauck

22

คุณสามารถลอง :

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

— ไอที Vlogs
แหล่งที่มา

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

— ไรอัน
แหล่งที่มา

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' จากนั้นมันจะเลื่อนเนื้อหาภายใน (.post ของ div) ไปยังหน้าสุดท้ายเช่นแชท ดังนั้นให้ทำสิ่งต่อไปนี้ทุกครั้งที่มีการเพิ่ม. 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'));

— คริสเตียน
แหล่งที่มา

3

ขั้นแรกให้รับตำแหน่งขององค์ประกอบ div เกินที่คุณต้องการเลื่อนโดยวิธี jQuery position ()
ตัวอย่าง: var pos = $ ("div"). position ();
จากนั้นรับค่า y cordinates (ความสูง) ขององค์ประกอบนั้นด้วยวิธี " .top "
ตัวอย่าง: pos.top;
จากนั้นรับค่า x cordinates ขององค์ประกอบ div นั้นด้วยวิธี " .left "
วิธีการเหล่านี้มาจากการวางตำแหน่ง CSS
เมื่อเราได้ x & y cordinates จากนั้นเราสามารถใช้scrollToของ javascript (); วิธี.
วิธีนี้เลื่อนเอกสารตามความสูงและความกว้างที่ระบุ
ใช้พารามิเตอร์สองตัวเป็น x & y cordinates ไวยากรณ์: window.scrollTo (x, y);
แล้วก็ผ่าน y & cordinates ขององค์ประกอบ DIV ในscrollTo ()ฟังก์ชั่น
ดูตัวอย่างด้านล่าง↓↓

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

— ซัลยิดซัลมาน
แหล่งที่มา

และฟางเพิ่มคำอธิบายข้อความของสิ่งที่คุณทำเพียงแค่ไม่ได้ทำให้รู้สึกมาก .. !!

— Clain Dsilva

ดังที่ @ClainDsilva กล่าวโปรดเพิ่มคำอธิบายที่เป็นข้อความ

— SreekanthGS

-1

ไม่ต้องการสิ่งเหล่านี้ด้วย เพียงเพิ่มdiv idลงในhref ของแท็ก <a>

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

เป็นแบบนั้น.

— Armin Akhlagh
แหล่งที่มา

กรุณาโยนแสงเพิ่มเติมเกี่ยวกับเรื่องนี้ มันไม่ได้ผลสำหรับฉัน

— Ifesinachi Bryan