Scorri facilmente fino a div id jQuery


248

Ho cercato di far scorrere correttamente il codice jquery di div id per funzionare correttamente. Sulla base di un'altra domanda di overflow dello stack ho provato quanto segue

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

Ma non ha funzionato. Scatta solo sul div. Ho anche provato

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

Senza progressi.



@TheVanillaThrilla l'ho fatto ma sembrava troppo gonfio per un singolo collegamento
StevenPHP

1
@StevenPHP, ho sostituito il codice JavaScript nel tuo esempio in conformità con la mia risposta stackoverflow.com/a/26129950/947687 . E funziona jsfiddle.net/8tLdq/643 .
dizel3d

L'OP è vecchio ma condividerò questo post per altri provenienti da SE. Ecco un articolo che condivide una semplice funzione che risolve il problema: smartik.ws/2015/01/…
Andrew Surdu,

Risposte:


667

Devi animare il file html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

9
@vector Ho un problema, una volta cliccato devo combattere con jquery per scorrere verso l'alto, qualche soluzione?
Sì, è il

@yesitsme ... su o giù nel mio caso
Gray Spectrum,

@GraySpectrum up, subito dopo aver fatto clic, sembra che ci sia un ritardo.
Sì, è il

1
Ho la stessa domanda, cosa succede se ho alcuni pulsanti che devono scorrere in posizioni diverse, ho provato a modificare questo codice ma non funziona. Potresti per favore fornire un altro esempio?
Dreadlord,

Abbiamo trovato una "correzione" per questo. Lo scorrimento dell'elemento corretto è ora fisso, ma continua a salire e scendere facendo clic sullo stesso target "scroll-to": var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });Spiegazione: .basics-contentè il div interno del modale su cui voglio scorrere, con targetfornisco il numero ID dell'elemento ...
Roland

111

Se si desidera sovrascrivere la navigazione href-id standard sulla pagina senza modificare il markup HTML per uno scorrimento regolare , utilizzare questo ( esempio ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

3
Funziona bene, posso suggerire che var pos = $(id).offset().top;può esserci una piccola modificavar pos = $id.offset().top;
Davey,

Molto bella. Se vuoi che ciò accada solo su determinati link (supponi di averne alcuni da mostrare o nascondere informazioni), aggiungi semplicemente un nome di classe a loro e aggiungi il nome della tua classe (ad esempio scroller) alla fine della dichiarazione della partita (ad esempio un [href ^ = "#"]. scroller).
Privateer,

Come si fa senza jQuery?
Vadorequest,

21

ecco i miei 2 centesimi:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

html:

<a class="scroll" target="contact">Contact</a>

e l'obiettivo:

<h2 id="contact">Contact</h2>

Questo funziona solo se non dichiari doctype.
David Martins,

6
A che cosa serve evalqui?
Visto il

Penso che sia necessario $('html, body').animatescorrere
Irshad Khan il

6

Ecco cosa uso:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

Il bello di questo è che puoi usare un numero illimitato di hash-link e ID corrispondenti senza dover eseguire un nuovo script per ognuno.

Se stai usando WordPress, inserisci il codice nel footer.phpfile del tuo tema proprio prima del tag body di chiusura </body>.

Se non si ha accesso ai file del tema, è possibile incorporare il codice direttamente nell'editor post / pagina (è necessario modificare il post in modalità Testo) o su un widget Testo che verrà caricato su tutte le pagine.

Se stai utilizzando qualsiasi altro CMS o solo HTML, puoi inserire il codice in una sezione che si carica su tutte le pagine prima del tag body di chiusura </body>.

Se hai bisogno di maggiori dettagli su questo, dai un'occhiata al mio post rapido qui: jQuery scorri fino a id

Spero che ti aiuti e fammi sapere se hai domande al riguardo.


Amando quanto sia semplice e vaniglia, è perfetto.
DoPeT

5

un altro esempio:

Collegamento HTML:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

Ancora HTML:

  <div id="featured">My content here</div>

3

sei sicuro di caricare il file jQuery scrollTo Plugin?

potresti ricevere un oggetto: metodo non trovato errore "scrollTo" nella console.

il metodo scrollTO non è un metodo jquery nativo. per usarlo è necessario includere lo scorrimento jquery Al file del plugin.

rif: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln: aggiungi questo nella sezione head.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Questa avrebbe dovuto essere la risposta accettata. Il codice nella domanda è corretto e funziona bene. Sembra che il plugin scrollTo non funzioni / non funzioni. . Non ha chiesto modi diversi per fare qualcosa di simile.
Chris Kavanagh,

3

Questo script è un miglioramento dello script di Vector. Ho apportato una piccola modifica ad esso. Quindi questo script funziona per ogni collegamento con lo scorrimento della pagina della classe in esso.

All'inizio senza allentare:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

Per facilitare avrai bisogno dell'interfaccia utente di Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Aggiungi questo allo script:

'easeOutExpo'

Finale

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

Tutte le facilitazioni che puoi trovare qui: Cheat Sheet .


3

Questo codice sarà utile per qualsiasi link interno sul web

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });


1

Puoi farlo usando il seguente semplice codice jQuery.

Tutorial, Demo e codice sorgente possono essere trovati da qui - Scorri fino a div usando jQuery

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

1

Qui ho provato questo, che funziona benissimo per me.

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

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

Cosa c'è di diverso nella tua risposta?
yunandtidus,


0

Questo funziona per me.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

Grazie.


0

Ecco la mia soluzione per scorrere fino a div / anchor usando jQuery nel caso in cui si abbia un'intestazione fissa in modo che non scorra al di sotto di essa. Funziona anche se lo colleghi da un'altra pagina.

Sostituisci semplicemente ".site-header" in div che contiene la tua intestazione.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.