Scorri facilmente fino a div id jQuery

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.

Devi animare il file html, body

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

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

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

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>

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.

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>

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>

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 .

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

Questo può essere fatto in JS semplice:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

Il supporto del browser è un problema, ma i browser moderni lo supportano .

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>

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>

Questo è il più semplice.Source- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

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.

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