วิธีการเลื่อนหน้าขึ้นหรือลงไปที่จุดยึดโดยใช้ jQuery

176

ฉันกำลังมองหาวิธีรวมเอฟเฟกต์แบบสไลด์สำหรับเมื่อคุณคลิกลิงก์ไปยังจุดยึดในเครื่องไม่ว่าจะขึ้นหรือลงของหน้า

ฉันต้องการบางสิ่งที่คุณมีลิงก์:

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

อาจมีการเพิ่มคลาสเพื่อให้คุณรู้ว่าคุณต้องการให้ลิงค์นี้เป็นลิงค์เลื่อน:

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

จากนั้นหากคลิกที่ลิงค์นี้หน้าจะเลื่อนขึ้นหรือลงไปยังตำแหน่งที่ต้องการ (อาจเป็น div, หัวเรื่อง, ด้านบนของหน้า ฯลฯ )

นี่คือสิ่งที่ฉันเคย:

    $(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');
    });
});

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

427

ลักษณะ

คุณสามารถทำได้โดยใช้และjQuery.offset()jQuery.animate()

ตรวจสอบสาธิต jsFiddle

ตัวอย่าง

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

scrollToAnchor('id3');

ข้อมูลมากกว่านี้

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

52

นอกจากนี้ยังสามารถทำทั่วไปในการทำงานกับทุกสมอเชื่อมโยงภายในหน้า:

$("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 ควรนำไปใช้อย่างไร? ฉันแทนที่โซลูชันของ dkmaack เป็นของคุณ แต่การเลื่อนไม่อยู่ที่นั่น (ตัวยึดนั้นทำงานได้) ฉันพลาดอะไรไป

— jakub

1

@bardo เพิ่มhistory.pushState(null, null, dest);เมื่อคุณป้องกันการเปลี่ยนแปลงแฮชตำแหน่งเริ่มต้น

— Mike Causer

7

FYI นอกเหนือจากโซลูชันของ @ bardo คุณควรหลีกเลี่ยงแฮชเมื่อใช้ jQuery ล่าสุดเช่นนั้น $ ("a [href ^ = \\ #]") stackoverflow.com/questions/7717527/ …

— jaegs

1

วัตถุประสงค์ของการเคลื่อนไหวทั้ง HTML และร่างกายคืออะไร? ดูเหมือนว่าสถานการณ์ที่เราไม่รู้ว่าเราทำอะไรและทำได้ทั้งหมด อาจเริ่มต้นหลาย scollings?

— ygoe

30

สมมติว่าแอตทริบิวต์hrefของคุณเชื่อมโยงกับdivด้วยรหัสแท็กที่มีชื่อเดียวกัน (ตามปกติ) คุณสามารถใช้รหัสนี้:

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

วิธีการแก้ปัญหาที่เรียบง่ายและมีประสิทธิภาพที่ช่วยให้การควบคุมที่สมบูรณ์ ฉันคิดว่าคำตอบนี้ควรได้รับการโหวตมากขึ้น

— cronfy

เห็นด้วยนี่เป็นวิธีแก้ปัญหาที่ดีที่สุดและช่วยฉันได้มาก

— อาจ

มันทำงานได้ nameแต่ขัดแย้งกับวัตถุประสงค์ของการใช้ เมื่อคุณใช้<a name="something"></a>คุณสามารถอ้างอิงได้จากภายนอกเช่นกันอย่างไรก็ตามโซลูชันของคุณไม่ได้ให้สิ่งนั้น

— Ramtin

8

นี่ทำให้ชีวิตฉันง่ายขึ้นมาก โดยทั่วไปคุณใส่แท็ก id องค์ประกอบของคุณและเลื่อนไปได้โดยไม่ต้องใช้รหัสจำนวนมาก

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

ใน Javascript

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

ใน html ของคุณ

<div id="scroollto1">

ที่นี่ฉันลงมาถึงหน้า

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

7

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

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

3

คำถามของแท้ + "" ทำอะไรในบรรทัดที่สองหรือไม่

— Rob

จาวาสคริปต์ @ Rob ไม่ได้มีการแก้ไขสตริงเพื่อใช้+กับสตริงหรือ vars concatenates "#some_anchor"พวกเขาเช่น: anchor_id + ""ฉันเชื่อว่าการต่อรองครั้งที่สองนั้นไม่จำเป็น

— onebree

ขอบคุณ @onebree มันเป็น concat สองผมสงสัยเกี่ยวกับ :)

— ร็อบ

5

นอกจากนี้คุณยังควรพิจารณาว่ามีเป้าหมายขยายและทำให้ใช้แทนposition offsetคุณสามารถบัญชีแถบนำทางที่มีศักยภาพที่คุณไม่ต้องการทับเป้าหมาย

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 ทางออกที่ดีที่สุดเพราะมันไม่จำเป็นต้องเรียนเพิ่มเติมและคณิตศาสตร์ padding ที่น่ารำคาญใน css สำหรับ navbars คงที่

— KSPR

แต่นี่ไม่ได้เขียนแท็กจุดยึดใน URL เพิ่มhistory.pushState({}, "", this.href);เพื่อให้ URL อัปเดต

— KSPR

3

วิธีการของฉันกับ jQuery เพื่อทำให้ลิงค์สมอเรือฝังทั้งหมดเลื่อนแทนที่จะกระโดดทันที

จริงๆมันคล้ายกับคำตอบโดยสันติ Nunezแต่ก็มากขึ้นมีความน่าเชื่อถือ

สนับสนุน

สภาพแวดล้อมที่มีหลายเฟรมเวิร์ก
ก่อนที่หน้าจะโหลดเสร็จ

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

— ติโม Huovinen
แหล่งที่มา

2

ฉันติดกับรหัสดั้งเดิมของฉันและยังรวมถึงจางในลิงค์ 'back-to-top' ทำให้การใช้รหัสนี้และจากที่นี่เล็กน้อย:

http://webdesignerwall.com/tutorials/animated-scroll-to-top

ทำได้ดี :)

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

1

คุณอาจต้องการที่จะเพิ่มoffsetTopและscrollTopค่าในกรณีที่คุณกำลังเคลื่อนไหวไม่ได้ทั้งหน้า แต่เนื้อหาบางอย่างที่ซ้อนกัน

เช่น :

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

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

0

SS Slow Scroll

วิธีนี้ไม่ต้องใช้แท็ก anchor แต่แน่นอนว่าคุณต้องตรงกับปุ่มเมนู (ตัวอย่างเช่น "ss" ตามอำเภอใจ) พร้อมกับรหัสองค์ประกอบปลายทางใน html ของคุณ

ss="about" พาคุณไปที่ 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>

ขยายตัวอย่างข้อมูล

ซอ

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

— Hastig Zusammenstellen
แหล่งที่มา

0

นี่คือทางออกที่ได้ผลสำหรับฉัน นี่เป็นฟังก์ชั่นทั่วไปที่ใช้งานได้กับaแท็กทั้งหมดที่อ้างถึงชื่อa

$("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'); 
});

หมายเหตุ 1: ตรวจสอบให้แน่ใจว่าคุณใช้เครื่องหมายคำพูดคู่"ใน html ของคุณ หากคุณใช้เครื่องหมายคำพูดเดี่ยวให้เปลี่ยนส่วนด้านบนของรหัสเป็นvar target = $("a[name='" + name.substring(1) + "']");

หมายเหตุ 2: ในบางกรณีโดยเฉพาะอย่างยิ่งเมื่อคุณใช้แถบกาวจาก bootstrap ชื่อaจะซ่อนอยู่ใต้แถบนำทาง ในกรณีเหล่านั้น (หรือกรณีที่คล้ายกัน) คุณสามารถลดจำนวนพิกเซลจากการเลื่อนเพื่อให้ได้ตำแหน่งที่เหมาะสมที่สุด ตัวอย่างเช่น: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');จะนำคุณไปยังที่targetเหลือ 15 พิกเซลที่ด้านบน

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

0

ฉันสะดุดตัวอย่างนี้ในhttps://css-tricks.com/snippets/jquery/smooth-scrolling/อธิบายรหัสทุกบรรทัด ฉันพบว่านี่เป็นตัวเลือกที่ดีที่สุด

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

คุณสามารถไปพื้นเมือง:

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

หรือด้วย 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);
      }
    }
  });

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

0

ตกลงวิธีที่ง่ายที่สุดคือ: -

ภายในฟังก์ชั่นคลิก (Jquery): -

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

HTML

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

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

-1

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

ทดสอบที่นี่:

http://jsbin.com/ucati4

— ซาบีซิงห์
แหล่งที่มา

3

โปรดอย่ารวมลายเซ็นโดยเฉพาะที่มีลิงก์ ... และโดยเฉพาะที่มีลิงค์ที่ไม่เกี่ยวข้อง คุณสามารถใส่สิ่งนั้นลงในโปรไฟล์ของคุณ

— Andrew Barber

คำถามที่ถามไม่ใช่วิธีการเลื่อนไปที่ด้านบนของหน้ามันเป็นวิธีการเลื่อนไปยังจุดยึดที่มี id

— user1380540

มีวิธีที่ฉันสามารถใช้ใน WordPress หรือไม่กำลังเพิ่มในเว็บไซต์ของฉัน แต่มันใช้งานไม่ได้จริง ๆ ที่นี่ลิงค์: scentology.burnnotice.co.za

— ตัวแทนผู้ใช้

-1

วิธีแก้ปัญหาต่อไปนี้ใช้ได้กับฉัน:

$("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);
        }
    );

— Behrouz.M
แหล่งที่มา