Bagaimana cara menggulir naik atau turun halaman ke jangkar menggunakan jQuery?


176

Saya mencari cara untuk memasukkan efek slide ketika Anda mengklik tautan ke jangkar lokal baik ke atas atau ke bawah halaman.

Saya ingin sesuatu di mana Anda memiliki tautan seperti:

<a href="#nameofdivetc">link text, img etc.</a>

mungkin dengan kelas yang ditambahkan sehingga Anda tahu Anda ingin tautan ini menjadi tautan geser:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

Kemudian jika tautan ini diklik, halaman tersebut meluncur ke atas atau ke bawah ke tempat yang diperlukan (bisa berupa div, tajuk, atas halaman dll).


Inilah yang saya miliki sebelumnya:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Jawaban:


427

Deskripsi

Anda dapat melakukan ini menggunakan jQuery.offset()dan jQuery.animate().

Check out jsFiddle Demonstrasi .

Sampel

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

Informasi Lebih Lanjut


52
Ini juga dapat dibuat generik untuk bekerja dengan semua tautan anchor internal di halaman:$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });
bardo

@ Bardo, bagaimana seharusnya diterapkan? Saya mengganti solusi dkmaack dengan milik Anda, tetapi sliding tidak ada di sana (jangkar itu sendiri berfungsi). Apa yang saya lewatkan?
jakub

1
@ Bardo juga menambahkan history.pushState(null, null, dest);karena Anda mencegah perubahan hash lokasi default
Mike Causer

7
FYI di samping solusi @ bardo, Anda harus menghindari hash ketika menggunakan jQuery terbaru seperti itu, $ ("a [href ^ = \\ #]") stackoverflow.com/questions/7717527/…
jaegs

1
Apa tujuan menjiwai html DAN badan? Sepertinya situasi di mana kita tidak tahu apa yang kita lakukan dan lakukan saja semuanya. Mungkinkah ini memulai beberapa scollings?
siapaoe

30

Dengan asumsi bahwa atribut href Anda terhubung ke div dengan id tag dengan nama yang sama (seperti biasa), Anda dapat menggunakan kode ini:

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT - (Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

1
Solusi yang sangat sederhana namun kuat, yang memungkinkan kontrol penuh. Saya pikir jawaban ini harus mendapatkan lebih banyak upvotes.
cronfy

Setuju, ini adalah solusi terbaik dan banyak membantu saya
mungkin terbaik

Ia bekerja tetapi mengalahkan tujuan penggunaan name. Ketika Anda menggunakan <a name="something"></a>, Anda dapat referensi dari luar juga, namun solusi Anda tidak menyediakan itu.
Ramtin

8

Ini membuat hidup saya jauh lebih mudah. Anda pada dasarnya memasukkan tag id elemen Anda dan gulir ke sana tanpa banyak kode

http://balupton.github.io/jquery-scrollto/

Dalam Javascript

$('#scrollto1').ScrollTo();

Di html Anda

<div id="scroollto1">

Di sini saya sepanjang halaman


7
function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

3
Pertanyaan asli, apakah + "" melakukan sesuatu di baris kedua?
Rob

Javascript @ Rob tidak memiliki interpolasi string, sehingga menggunakan +dengan string atau vars merangkai mereka, seperti: "#some_anchor". Sungguh, konser kedua anchor_id + ""tidak diperlukan, saya percaya.
onebree

Terima kasih @ onebree Ini adalah konser kedua yang saya pikirkan :)
Rob

5

Anda juga harus mempertimbangkan bahwa target memiliki padding dan karenanya digunakan positionsebagai gantinya offset. Anda juga dapat memperhitungkan nav bar potensial yang tidak ingin tumpang tindih target.

const $navbar = $('.navbar');

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})

IMHO solusi terbaik karena tidak perlu kelas tambahan dan matematika padding yang mengganggu di css untuk navbar tetap
KSPR

Tapi ini tidak menulis ulang tag jangkar di url. Tambahkan history.pushState({}, "", this.href);untuk menjaga url diperbarui
KSPR

3

Pendekatan saya dengan jQuery untuk membuat semua tautan jangkar yang disematkan meluncur, bukannya melompat secara instan

Ini benar-benar mirip dengan jawaban oleh Santi Nunez tetapi lebih dapat diandalkan .

Dukung

  • Lingkungan multi-kerangka kerja.
  • Sebelum halaman selesai dimuat.
<a href="#myid">Go to</a>
<div id="myid"></div>
// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);


1

Anda mungkin ingin menambahkan nilai offsetTop dan scrollTop seandainya Anda menjiwai bukan seluruh halaman, melainkan beberapa konten bersarang.

misalnya:

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

0

SS Gulung Lambat

Solusi ini tidak memerlukan tag anchor tetapi tentu saja Anda harus mencocokkan tombol menu (atribut sewenang-wenang, misalnya 'ss') dengan id elemen tujuan di html Anda.

ss="about" membawamu ke id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});
.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

Biola

https://jsfiddle.net/Hastig/stcstmph/4/


0

Inilah solusi yang bekerja untuk saya. Ini adalah fungsi generik yang berfungsi untuk semua atag yang merujuk pada namaa

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

Catatan 1: Pastikan Anda menggunakan tanda kutip ganda "dalam html Anda. Jika Anda menggunakan tanda kutip tunggal, ubah bagian kode di atas kevar target = $("a[name='" + name.substring(1) + "']");

Catatan 2: Dalam beberapa kasus, terutama ketika Anda menggunakan sticky bar dari bootstrap, namanya aakan bersembunyi di bawah bilah navigasi. Dalam kasus tersebut (atau kasus serupa), Anda dapat mengurangi jumlah piksel dari gulir untuk mencapai lokasi yang optimal. Sebagai contoh: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');akan membawa Anda ke targetdengan 15 piksel tersisa di atas.


0

Saya menemukan contoh ini di https://css-tricks.com/snippets/jquery/smooth-scrolling/ menjelaskan setiap baris kode. Saya menemukan ini menjadi pilihan terbaik.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Anda bisa menjadi asli:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

atau dengan jquery:

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        && location.hostname == this.hostname
       ) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

0

Ok metode paling sederhana adalah: -

Dalam fungsi klik (Jquery): -

$('html,body').animate({scrollTop: $("#resultsdiv").offset().top},'slow');

HTML

<div id="resultsdiv">Where I want to scroll to</div>

-1
$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

Uji di sini:

http://jsbin.com/ucati4


3
Harap jangan sertakan tanda tangan, terutama yang memiliki tautan ... dan terutama yang dengan tautan yang tidak terkait. Anda dapat meletakkan hal semacam itu di profil Anda.
Andrew Barber

Pertanyaan yang diajukan adalah bukan bagaimana cara menggulir ke bagian atas halaman, tetapi bagaimana cara menggulir ke jangkar dengan id
user1380540

Apakah ada cara saya dapat menggunakannya di WordPress? Saya menambahkan ke situs saya tetapi tidak benar-benar berfungsi. Berikut tautannya: scentology.burnnotice.co.za
agen pengguna

-1

solusi berikut ini bekerja untuk saya:

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );
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.