Cum să derulați în sus sau în jos pagina la o ancoră folosind jQuery? (Programare, Jquery, Jquery Plugins, Ancoră, Slide)

ade123 a intrebat.

Caut o modalitate de a include un efect de diapozitiv pentru atunci când faceți clic pe un link către o ancoră locală, fie în sus sau în jos în pagină.

Mi-ar plăcea ceva în care să ai un link de genul:

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

poate cu o clasă adăugată astfel încât să știi că vrei ca acest link să fie un link glisant:

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

Apoi, dacă se face clic pe acest link, pagina alunecă în sus sau în jos până la locul dorit (ar putea fi un div, un titlu, partea de sus a paginii etc.).


Aceasta este ceea ce am avut anterior:

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

14 răspunsuri
dknaack

Descriere

Puteți face acest lucru folosind jQuery.offset() și jQuery.animate().

Verificați demonstrație jsFiddle.

Exemplu

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

scrollToAnchor('id3');

Mai multe informații

Comentarii

    56

  • Acest lucru poate fi, de asemenea, făcut generic pentru a funcționa cu toate legăturile de ancorare interne din pagină: $("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); }); –  > Por bardo.
  • @bardo, cum ar trebui să fie implementat? Am înlocuit soluția lui dkmaack cu soluția ta, dar alunecarea nu există (ancora în sine este funcțională). Ce îmi scapă? –  > Por jakub.
  • @bardo adaugă și history.pushState(null, null, dest); deoarece împiedicați schimbarea hash-ului locației implicite –  > Por Mike Causer.
  • FYI în plus față de soluția lui @bardo, ar trebui să scăpați hash-ul atunci când utilizați cel mai recent jQuery, astfel, $(„a[href^=\#]”) stackoverflow.com/questions/7717527/… –  > Por jaegs.
  • Care este scopul animării atât a html-ului cât și a corpului? Pare a fi o situație în care nu știm ce facem și le facem pe toate. S-ar putea ca acest lucru să pornească mai multe scoll-uri? –  > Por ygoe.
Santi Nunez

Presupunând că dvs. href este legat de un atribut div cu tag-ul id cu același nume (ca de obicei), puteți utiliza acest cod:

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

Comentarii

  • O soluție foarte simplă, dar puternică, care permite un control complet. Cred că acest răspuns ar trebui să primească mai multe upvotes. –  > Por cronfy.
  • De acord, aceasta este cea mai bună soluție și m-a ajutat foarte mult –  > Por probablybest.
  • Funcționează, dar învinge scopul utilizării name. Când utilizați <a name="something"></a>, , puteți face referire la el și din exterior, însă soluția dvs. nu oferă acest lucru. –  > Por Ramtin.
ipegasus
function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

Comentarii

  • Întrebare sinceră, +”” face ceva în al doilea rând? –  > Por Rob.
  • @Rob javascript nu are interpolare de șiruri de caractere, deci folosind + cu șiruri de caractere sau vars le concatenează, cum ar fi: "#some_anchor". Într-adevăr, a doua concat anchor_id + "" nu este necesar, cred. –  > Por onebree.
  • Mulțumesc @onebree Mă întrebam despre al doilea concat 🙂 –  > Por Rob.
bobthenob

Acest lucru mi-a făcut viața mult mai ușoară. Practic, puneți în tag-ul id al elementelor dvs. și se derulează la el fără prea mult cod

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

În Javascript

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

În html-ul tău

<div id="scroollto1">

Aici sunt în josul paginii

Matthias

Ar trebui, de asemenea, să luați în considerare faptul că ținta are o umplutură și, prin urmare, utilizați position în loc de offset. De asemenea, puteți lua în considerare o potențială bară de navigare pe care nu doriți să o suprapuneți peste țintă.

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

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

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

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

Comentarii

  • IMHO cea mai bună soluție, deoarece nu are nevoie de clase suplimentare și matematica enervantă de padding în css pentru navbar-uri fixe –  > Por KSPR.
  • Dar acest lucru nu rescrie tag-ul de ancorare din url. Adăugați history.pushState({}, "", this.href); pentru a menține actualizat url-ul –  > Por KSPR.
Timo Huovinen

Abordarea mea cu jQuery pentru a face ca toate legăturile de ancorare încorporate să alunece în loc să sară instantaneu

Este foarte asemănător cu răspunsul lui Santi Nunez, dar este mai mult de încredere.

Suport

  • Mediu cu mai multe cadre de lucru.
  • Înainte ca pagina să se termine de încărcat.
<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);

Ramtin

Iată soluția care a funcționat pentru mine. Aceasta este o funcție generică care funcționează pentru toate a care se referă la o etichetă numită 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'); 
});

Nota 1: Asigurați-vă că folosiți ghilimele duble " în html-ul dumneavoastră. Dacă folosiți ghilimele simple, schimbați partea de mai sus a codului în var target = $("a[name='" + name.substring(1) + "']");

Nota 2: În unele cazuri, în special atunci când folosiți bara lipicioasă din bootstrap, tag-ul numit a se va ascunde sub bara de navigare. În aceste cazuri (sau în orice alt caz similar), puteți reduce numărul de pixeli din scroll pentru a obține locația optimă. De exemplu: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow'); vă va duce la target cu 15 pixeli rămași în partea de sus.

Comentarii

  • Asigurați-vă că scăpați din # în selectorul dvs. jQuery utilizând $("a[href^=\#]") –  > Por Eric K.
ade123

Am rămas cu codul meu original și am inclus, de asemenea, un link „back-to-top” care utilizează acest cod și un pic de aici:

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

Funcționează bine 🙂

TuxujPes

Este posibil să doriți să adăugați offsetTop și scrollTop în cazul în care nu animați întreaga pagină, ci mai degrabă o parte din conținutul imbricate.

De exemplu :

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

Mikeys4u

Ok, cea mai simplă metodă este: –

În cadrul funcției click (Jquery): –

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

HTML

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

Hastig Zusammenstellen

SS Slow Scroll

Această soluție nu necesită etichete de ancorare, dar, desigur, trebuie să potriviți butonul de meniu (atribut arbitrar, „ss” în exemplu) cu id-ul elementului de destinație din html.

ss="about" vă duce la id="about"

Fiddle

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

Frankey

Am dat peste acest exemplu pe https://css-tricks.com/snippets/jquery/smooth-scrolling/ care explică fiecare linie de cod. Mi s-a părut a fi cea mai bună opțiune.

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

Puteți opta pentru o soluție nativă:

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

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

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

Testați-l aici:

http://jsbin.com/ucati4

Comentarii

  • Vă rugăm să nu includeți semnături, mai ales cele cu link-uri… și în special cele cu link-uri fără legătură. Puteți pune astfel de lucruri în profilul dumneavoastră. –  > Por Andrew Barber.
  • Întrebarea pusă nu a fost cum să derulezi până în partea de sus a paginii, ci cum să derulezi până la o ancoră cu un id –  > Por user1380540.
  • Există o modalitate de a folosi acest lucru în WordPress?Sunt adăugarea la site-ul meu, dar nu prea funcționează. Aici este link-ul: scentology.burnnotice.co.za –  > Por agent utilizator.
Behrouz.M

următoarea soluție a funcționat pentru mine:

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