Scrollen Sie zu div id jQuery

Wenn Sie die standardmäßige href-id-Navigation auf der Seite überschreiben möchten, ohne das HTML-Markup für smooth scrolling zu ändern, verwenden Sie Folgendes ( example )

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

Ich verwende Folgendes: 

<!-- 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 dass für jedes ein neues Skript ausgeführt werden muss. 

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

Wenn Sie keinen Zugriff auf die Designdateien haben, können Sie den Code direkt in den Beitrags-/Seiteneditor einbetten (Sie müssen den Beitrag im Textmodus bearbeiten) oder in ein Text-Widget, 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 </body> geladen wird. 

Wenn Sie weitere Informationen dazu benötigen, schauen Sie sich meinen kurzen Beitrag hier an: jQuery scrollen Sie zu 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: Die Methode "scrollTo" in der Konsole wurde nicht gefunden. 

die scrollTO-Methode ist keine native Jquery-Methode. Um es zu verwenden, müssen Sie die Jquery-Scroll-Plug-In-Datei einfügen. 

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

soln: füge dies im head-Bereich hinzu.

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

Dieses Skript ist eine Verbesserung des Skripts von Vector. Ich habe eine kleine Änderung daran vorgenommen. Dieses Skript funktioniert also für jeden Link mit dem Seiten-Scroll der Klasse.

Zunächst ohne Nachlassen:

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

Zur Erleichterung benötigen Sie eine 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 Erleichterungen finden Sie hier: Spickzettel .

Hier habe ich versucht, diese Arbeit für mich großartig.

$('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>

Sie können dies tun, indem Sie den folgenden einfachen jQuery-Code verwenden.

Tutorial, Demo und Quellcode finden Sie hier - Mit jQuery zum div scrollen

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>

Das funktioniert für mich.

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

Dieser Code ist für alle internen Links im Web hilfreich

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

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

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