Reibungsloser Bildlauf zur Div-ID jQuery

248

Ich habe versucht, einen Bildlauf zum div id jquery-Code durchzuführen, damit er ordnungsgemäß funktioniert. Basierend auf einer anderen Frage zum Stapelüberlauf habe ich Folgendes versucht

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

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

Aber es hat nicht funktioniert. Es schnappt nur nach dem Div. Ich habe es auch versucht

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

Ohne Fortschritt.

StevenPHP
quelle
1
Hast du dir das angeschaut? stackoverflow.com/questions/3432656/…
Der Vanille-Thrilla
@ TheVanillaThrilla Ich habe es getan, aber es schien zu aufgebläht für eine einzelne Link-Verwendung
StevenPHP
1
@StevenPHP, ich habe JavaScript-Code in Ihrem Beispiel gemäß meiner Antwort stackoverflow.com/a/26129950/947687 ersetzt . Und es funktioniert jsfiddle.net/8tLdq/643 .
dizel3d
Das OP ist alt, aber ich werde diesen Beitrag für andere aus SE teilen. Hier ist ein Artikel, der eine einfache Funktion zur Lösung des Problems teilt
Andrew Surdu

Antworten:

667

Sie müssen das animieren html, body

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

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});
Kevin Lynch
quelle
9
@vector Ich habe ein Problem. Sobald es angeklickt ist, muss ich mit jquery kämpfen, um nach oben zu scrollen. Gibt es eine Lösung?
YesItsMe
@yesitsme ... rauf oder runter in meinem Fall
Gray Spectrum
@GraySpectrum up, nur direkt nach dem Klicken, klingt nach einer Verzögerung.
YesItsMe
1
Ich habe die gleiche Frage: Was ist, wenn ich nur wenige Schaltflächen habe, die zu verschiedenen Positionen scrollen müssen? Ich habe versucht, diesen Code zu ändern, aber es funktioniert nicht. Könnten Sie bitte ein anderes Beispiel nennen?
Dreadlord
Ich habe ein "Update" dafür gefunden. Das Scrollen des richtigen Elements ist jetzt korrigiert, aber es geht immer noch auf und ab, indem Sie auf dasselbe "Scroll-to" -Ziel klicken: var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });Erläuterung: .basics-contentist der innere Teil des Modals, zu dem ich tatsächlich scrollen möchte, wobei targetich die ID-Nummer gebe des Elements ...
Roland
111

Wenn Sie die Standard- href-id-Navigation auf der Seite überschreiben möchten, ohne das HTML-Markup für einen reibungslosen Bildlauf zu ändern , verwenden Sie Folgendes ( Beispiel ):

// 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});
});
dizel3d
quelle
3
Das funktioniert gut, darf ich vorschlagen, dass ein sehr kleiner Tweak sein var pos = $(id).offset().top;kannvar pos = $id.offset().top;
Davey
Sehr schön. Wenn dies nur bei bestimmten Links geschehen soll (z. B. wenn Sie Informationen ein- oder ausblenden müssen), fügen Sie ihnen einfach einen Klassennamen hinzu und setzen Sie Ihren Klassennamen (z. B. Scroller) an das Ende der Übereinstimmungserklärung (z. B. eine [href ^ = "#"]. scroller).
Privateer
Wie geht das ohne jQuery?
Vadorequest
21

Hier sind meine 2 Cent:

Javascript:

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

Html:

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

und das Ziel:

<h2 id="contact">Contact</h2>
Alexandre Mélard
quelle
Dies funktioniert nur, wenn Sie keinen Doctype deklarieren.
David Martins
6
Wozu dient evalhier?
Seher
Ich denke, es ist erforderlich, $('html, body').animatezu scrollen
Irshad Khan
6

Folgendes verwende ich:

<!-- 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>

Das Schöne an diesem ist, dass Sie eine unbegrenzte Anzahl von Hash-Links und entsprechenden IDs verwenden können, ohne für jedes ein neues Skript ausführen zu müssen.

Wenn Sie WordPress verwenden, fügen Sie den Code footer.phpdirekt vor dem schließenden Body-Tag in die Datei Ihres Themas ein </body>.

Wenn Sie keinen Zugriff auf die Themendateien haben, können Sie den Code direkt in den Beitrags- / Seiteneditor (Sie müssen den Beitrag im Textmodus bearbeiten) oder in ein Text-Widget einbetten, das auf allen Seiten geladen wird.

Wenn Sie ein anderes CMS oder nur HTML verwenden, können Sie den Code in einen Abschnitt einfügen, der auf allen Seiten direkt vor dem schließenden Body-Tag geladen wird </body>.

Wenn Sie weitere Details dazu benötigen, lesen Sie meinen kurzen Beitrag hier: jQuery Smooth Scroll to ID

Hoffe das hilft und lass es mich wissen, wenn du Fragen dazu hast.

Bibiano Wenceslao
quelle
Ich liebe es, wie einfach und vanillig das ist, perfekt.
DoPeT
5

ein Beispiel mehr:

HTML-Link:

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

HTML-Anker:

  <div id="featured">My content here</div>
Eugen
quelle
3

Sind Sie sicher, dass Sie die jQuery scrollTo Plugin-Datei laden?

Möglicherweise wird ein Objekt angezeigt: Methode "scrollTo" -Fehler in der Konsole nicht gefunden.

Die scrollTO-Methode ist keine native jquery-Methode. Um es zu verwenden, müssen Sie die jquery scroll To Plugin-Datei einschließen.

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

Lösung: Fügen Sie dies im Kopfbereich hinzu.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>
MortalViews
quelle
Dies hätte die akzeptierte Antwort sein sollen. Der Code in der Frage ist korrekt und funktioniert einwandfrei. Es sieht so aus, als ob das scrollTo-Plugin nicht funktioniert / nicht funktioniert hat. . Er fragte nicht nach verschiedenen Möglichkeiten, etwas Ähnliches zu tun.
Chris Kavanagh
3

Dieses Skript ist eine Verbesserung des Skripts von Vector. Ich habe ein wenig daran geändert. Dieses Skript funktioniert also für jeden Link mit dem darin enthaltenen Klassenseiten-Bildlauf.

Zuerst ohne nachzulassen:

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

Zur Erleichterung benötigen Sie die Jquery-Benutzeroberfläche:

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

Fügen Sie dies dem Skript hinzu:

'easeOutExpo'

Finale

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

Alle Easing finden Sie hier: Cheat Sheet .

Ramon Weijenbarg
quelle
3

Dieser Code ist nützlich für alle internen Links im Web

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

Sie können dies mit dem folgenden einfachen jQuery-Code tun.

Tutorial, Demo und Quellcode finden Sie hier - Reibungsloser Bildlauf zum Div mit 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>
JoyGuru
quelle
1

Hier habe ich das versucht, das funktioniert super für mich.

$('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>
waqas noor
quelle
Was ist anders in deiner Antwort?
Yunandtidus
1

Dies kann in einfachem JS erfolgen:

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

Browser-Unterstützung ist ein kleines Problem, aber moderne Browser unterstützen es .

Nitin Jadhav
quelle
0

Das funktioniert bei mir.

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

Vielen Dank.

Y. Joy Ch. Singha
quelle
0

Hier ist meine Lösung, um mit jQuery einen reibungslosen Bildlauf zu div / anchor durchzuführen, falls Sie einen festen Header haben, damit dieser nicht darunter rollt. Es funktioniert auch, wenn Sie es von einer anderen Seite verlinken.

Ersetzen Sie einfach ".site-header" durch div, das Ihren Header enthält.

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