Gulir ke div menggunakan jquery

205

jadi saya memiliki halaman yang memiliki bilah tautan tetap di samping. Saya ingin menggulir ke div yang berbeda. Pada dasarnya halaman ini hanya satu situs web yang panjang, di mana saya ingin menggulir ke div yang berbeda menggunakan kotak menu di samping.

Ini jquery yang saya miliki sejauh ini

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

Masalahnya adalah itu secara otomatis pergi ke div kontak ketika memuat, kemudian ketika saya menekan #contactlinkmenu itu bergulir kembali ke atas.

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

Terima kasih untuk bantuannya

jquery  scroll 
— tshauck
sumber
Seperti apa rupa html di mana seharusnya tautan kontak?
— James Black
— James Black
3
Apakah ada alasan Anda menggunakan jQuery alih-alih jangkar lama?
— brianpeiris
2
@ James - Itu bukan duplikat. Pertanyaan ini menggulir halaman ke div tertentu. Pertanyaan itu menggulung halaman dengan kenaikan yang ditentukan (terlepas dari apa yang ditampilkan divs).
— Peter Ajtai
Ini sangat bagus: css-tricks.com/snippets/jquery/smooth-scrolling . Bekerja untukku.
— maahd

Jawaban:

342

Pertama, kode Anda tidak mengandung contactdiv, ia memiliki contactsdiv!

Di sidebar yang Anda miliki contactdi div di bagian bawah halaman yang Anda miliki contacts. Saya menghapus final suntuk contoh kode. (Anda juga salah mengeja projectslinkid di bilah sisi).

Kedua, lihat beberapa contoh klik pada halaman referensi jQuery. Anda harus menggunakan klik seperti, object.click( function() { // Your code here } );untuk mengikat event handler klik ke objek .... Seperti dalam contoh saya di bawah ini. Selain itu, Anda juga dapat memicu klik pada suatu objek dengan menggunakannya tanpa argumen, seperti object.click().

Ketiga, scrollToadalah plugin di jQuery. Saya tidak tahu apakah Anda memiliki plugin yang diinstal. Anda tidak dapat menggunakan scrollTo()tanpa plugin. Dalam hal ini, fungsionalitas yang Anda inginkan hanya 2 baris kode, jadi saya tidak melihat alasan untuk menggunakan plugin.

Ok, sekarang ke solusi.

Kode di bawah ini akan bergulir ke div yang benar jika Anda mengklik tautan di sidebar. Jendela memang harus cukup besar untuk memungkinkan pengguliran:

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

Contoh Langsung

(Gulir ke fungsi yang diambil dari sini )

PS: Jelas Anda harus memiliki alasan kuat untuk memilih rute ini daripada menggunakan tag jangkar <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
sumber
Senang mengetahui itu membantu, tapi saya pikir maksud Anda "acar", meskipun saya menemukan lebih baik makan mereka daripada keluar dari mereka.
— Peter Ajtai
Itu tidak menggulir pada klik pertama. : / Saya klik kedua kali dan berhasil.
— Burak Karakuş
Saya pikir lebih logis untuk meletakkan ID ke href seperti ini: href = "# about" jsfiddle.net/onigetoc/w5muyern
— Gino
itu tidak berfungsi pada saat pertama. tetapi ketika kita mengklik 2 kali maka itu berfungsi dengan sempurna.
— Satish Singh
115

Tidak ada .scrollTo()metode di jQuery, tetapi ada .scrollTop()satu. .scrollTopmengharapkan parameter, yaitu, nilai piksel tempat scrollbar seharusnya bergulir.

Contoh:

$(window).scrollTop(200);

akan menggulir jendela (jika ada cukup konten di dalamnya).

Jadi Anda bisa mendapatkan nilai yang diinginkan ini dengan .offset()atau .position().

Contoh:

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

Ini akan menggulir #contactelemen ke tampilan.

Metode alternatif non-jQuery adalah .scrollIntoView(). Anda dapat memanggil metode itu di mana saja DOM elementseperti:

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

truemenunjukkan bahwa elemen diposisikan di bagian atas sedangkan falseakan menempatkannya di bagian bawah tampilan. Yang menyenangkan dengan metode jQuery adalah, Anda bahkan dapat menggunakannya dengan fx functionssuka .animate(). Jadi, Anda dapat memuluskan sesuatu.

Referensi: .scrollTop () , .position () , .offset ()

— jandy
sumber
Saya khawatir saya masih mengalami masalah yang sama. Halaman memuat scroll ke bawah halaman dalam jumlah tertentu, bukan div kontak, dan tautan tidak membawa saya ke div kontak juga. Terima kasih EDIT: katakan saya sedang melonggarkan div menggunakan top dengan css, apakah ini akan menyebabkannya pergi ke tempat yang salah? Hanya pemikiran saja.
— tshauck
22

Anda dapat mencoba : 

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

Tambahkan fungsi kecil ini dan gunakan seperti ini: $('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);
    });
  }
});
— Ryan
sumber
6

Oke teman-teman, ini solusi kecil, tetapi berfungsi dengan baik.

misalkan kode berikut:

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

Anda inginkan ketika sebuah posting baru ditambahkan ke 'the_div_holder' kemudian gulirkan konten dalamnya (.post div itu) ke yang terakhir seperti obrolan. Jadi, lakukan hal berikut setiap kali .post baru ditambahkan ke pemegang div utama:

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

Pertama, dapatkan posisi elemen div hingga yang ingin Anda gulir dengan metode jQuery position ().
Contoh: var pos = $ ("div"). Position ();
Kemudian dapatkan koordinat (tinggi) elemen itu dengan metode " .top ".
Contoh: pos.top;
Kemudian dapatkan koordinat x dari elemen div itu dengan metode " .left ".
Metode-metode ini berasal dari penentuan posisi CSS.
Setelah mendapatkan koordinat x & y, maka kita dapat menggunakan scrollTo (); metode.
Metode ini menggulir dokumen hingga tinggi & lebar tertentu.
Dibutuhkan dua parameter sebagai koordinat x & y. Sintaks: window.scrollTo (x, y);
Kemudian, cukup lewati koordinat x & y dari elemen DIV dalam fungsi scrollTo () .
Lihat contoh di bawah ini ↓ ↓

<!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
sumber
Dan menambahkan beberapa penjelasan teks dari apa yang Anda lakukan, hanya saja tidak masuk akal .. !!
— Clain Dsilva
Seperti yang dikatakan @ClainDsilva, silakan tambahkan beberapa penjelasan tekstual.
— SreekanthGS
-1

Tidak perlu terlalu ini. Cukup tambahkan div id ke href dari tag <a>

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

Seperti itu.

— Armin Akhlagh
sumber
Tolong, berikan lebih banyak cahaya pada ini. Itu tidak berhasil untuk saya.
— Ifesinachi Bryan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.