Reibungsloser Bildlauf zur Div-ID jQuery

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.

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

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

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>

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.

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>

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>

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 .

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

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>

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>

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 .

Dies ist die einfachste. Quelle: https://www.w3schools.com/jsref/met_element_scrollintoview.asp

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

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.

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