it-swarm.com.de

jQuery blättern Sie von einer anderen Seite zur ID

Ich habe versucht, den Seiten-Scroll von jQuery innerhalb einiger Seiten zu verwenden und konnte einen glatten Seiten-Scroll durchführen. Das einzige Problem, das ich jetzt habe, ist, wenn ich versuche, dies von einer anderen Seite aus zu tun. Ich meine damit, wenn ich auf einen Link in einer Seite klicke, sollte sie die neue Seite laden und dann zum jeweiligen div-Element scrollen.

Hier ist der Code, den ich zum Scrollen innerhalb der Seite verwendet habe:

var jump=function(e)
{
       //prevent the "normal" behaviour which would be a "hard" jump
       e.preventDefault();
   //Get the target
   var target = $(this).attr("href");
   //perform animated scrolling
   $('html,body').animate(
   {
           //get top-position of target-element and set it as scroll target
           scrollTop: $(target).offset().top
   //scrolldelay: 2 seconds
   },2000,function()
   {
           //attach the hash (#jumptarget) to the pageurl
           location.hash = target;
   });

}

$(document).ready(function()
{
       $('a[href*=#]').bind("click", jump);
       return false;
});

Ich hoffe die Idee ist klar.

Vielen Dank 

Sehr wichtiger Hinweis : Dieser Code, den ich oben gepostet habe, funktioniert auf derselben Seite hervorragend, aber ich möchte auf einen Link von einer Seite klicken und zu einer anderen gehen und dann zum Ziel scrollen. Ich hoffe es ist jetzt klar. Vielen Dank 

46
Digital site

Sie müssen im Grunde Folgendes tun:

  • füge den Ziel-Hash in den Link ein, der auf die andere Seite zeigt (href="other_page.html#section")
  • deaktivieren Sie in Ihrem ready-Handler den harten Sprung, der normalerweise vom Hash vorgegeben wird, und scrollen Sie die Seite so bald wie möglich nach oben, und rufen Sie jump() auf. Sie müssen dies asynchron durchführen
  • wenn in jump() kein Ereignis angegeben ist, machen Sie location.hash zum Ziel
  • auch kann diese Technik den Sprung möglicherweise nicht rechtzeitig abfangen, daher sollten Sie den html,body sofort ausblenden und ihn wieder anzeigen, sobald Sie ihn auf null zurückgesetzt haben

Dies ist Ihr Code mit dem obigen Zusatz:

var jump=function(e)
{
   if (e){
       e.preventDefault();
       var target = $(this).attr("href");
   }else{
       var target = location.hash;
   }

   $('html,body').animate(
   {
       scrollTop: $(target).offset().top
   },2000,function()
   {
       location.hash = target;
   });

}

$('html, body').hide();

$(document).ready(function()
{
    $('a[href^=#]').bind("click", jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});

Verifiziertes Arbeiten in Chrome/Safari, Firefox und Opera. Weiß nicht, ob IE.

62
Petr Vostrel

Auf den Link setzen Sie einen Hash:

<a href="otherpage.html#elementID">Jump</a>

Auf einer anderen Seite können Sie Folgendes tun:

$('html,body').animate({
  scrollTop: $(window.location.hash).offset().top
});

Auf einer anderen Seite sollten Sie ein Element haben, dessen ID auf elementID gesetzt ist, zu dem Sie scrollen können. Natürlich können Sie den Namen ändern.

21
Sarfraz

Zusammen mit den Antworten von Petr und Sarfraz komme ich zu folgendem. 

Auf page1.html: 

<a href="page2.html#elementID">Jump</a>

Auf page2.html: 

<script type="text/javascript">
    $(document).ready(function() {
        $('html, body').hide();

        if (window.location.hash) {
            setTimeout(function() {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                    scrollTop: $(window.location.hash).offset().top
                    }, 1000)
            }, 0);
        }
        else {
            $('html, body').show();
        }
    });
</script>
9
zanetu

Ich möchte die Verwendung des scrollTo-Plugins empfehlen 

http://demos.flesler.com/jquery/scrollTo/

Sie können den eingestellten Bildlauf nach JQuery-Css-Auswahl ausführen.

$('html,body').scrollTo( $(target), 800 );

Ich hatte großes Glück mit der Genauigkeit dieses Plugins und seiner Methoden, wobei andere Methoden zum Erzielen des gleichen Effekts wie .offset() oder .position() in der Vergangenheit für mich kein Cross-Browser waren. Ich sage nicht, dass Sie solche Methoden nicht verwenden können. Ich bin mir sicher, dass es eine Möglichkeit gibt, dies über Browser zu tun. Ich habe gerade festgestellt, dass scrollTo zuverlässiger ist. 

6
Fresheyeball

Ich habe ein wiederverwendbares Plugin erstellt, das dies tun kann ... Ich habe die Bindung an Ereignisse außerhalb des Plugins selbst überlassen, weil ich es für so einen kleinen Helfer zu aufdringlich finde ....

jQuery(function ($) {

    /**
     * This small plugin will scrollTo a target, smoothly
     *
     * First argument = time to scroll to the target
     * Second argument = set the hash in the current url yes or no
     */
    $.fn.smoothScroll = function(t, setHash) {
        // Set time to t variable to if undefined 500 for 500ms transition
        t = t || 500;
        setHash = (typeof setHash == 'undefined') ? true : setHash;

        // Return this as a proper jQuery plugin should
        return this.each(function() {
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, t);

            // Lets set the hash to the current ID since if an event was prevented this doesn't get done
            if (this.id && setHash) {
                window.location.hash = this.id;
            }
        });
    };

});

Als Nächstes können wir dies einfach tun, nach einem Hash suchen und versuchen, ihn direkt als Selektor für jQuery zu verwenden. Jetzt konnte ich das nicht leicht testen, aber ich habe vor kurzem ähnliche Sachen für Produktionsstätten hergestellt, wenn dies nicht sofort klappt, lass es mich wissen und ich werde nach der Lösung suchen, die ich dort bekam.

(Skript sollte sich innerhalb eines Onload-Abschnitts befinden)

if (window.location.hash) {
    window.scrollTo(0,0);
    $(window.location.hash).smoothScroll();
}

Als Nächstes binden wir das Plugin an das Anklicken von Ankern, die nur ein Hash in ihrem href-Attribut enthalten.

(Skript sollte sich innerhalb eines Onload-Abschnitts befinden)

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

    $($(this).attr('href')).smoothScroll();
});

Da jQuery nichts tut, wenn das Match selbst fehlschlägt, haben wir einen Nice-Fallback, wenn ein Ziel auf einer Seite nicht gefunden werden kann.

Update

Alternativer onclick-Handler, um nach oben zu blättern, wenn nur ein Hash vorhanden ist:

$('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');

    // In this case we have only a hash, so maybe we want to scroll to the top of the page?
    if(href.length === 1) { href = 'body' }

    $(href).smoothScroll();
});

Hier ist auch ein einfaches jsfiddle, das das Scrollen innerhalb einer Seite demonstriert. Onload ist etwas schwer einzurichten ... 

http://jsfiddle.net/sg3s/bZnWN/

Update 2

Sie könnten also Probleme bekommen, wenn das Fenster bereits zum Element onload scrollt. Dies behebt folgendes: window.scrollTo(0,0); rollen die Seite einfach nach links oben. Es wurde dem obigen Code-Snippet hinzugefügt.

2
sg3s
function scroll_down(){
    $.noConflict();
    jQuery(document).ready(function($) {
        $('html, body').animate({
            scrollTop : $("#bottom").offset().top
        }, 1);
    });
    return false;
}

hier ist "bottom" die div-Tag-ID, zu der Sie scrollen möchten. Um die Animationseffekte zu ändern, können Sie die Zeit von '1' auf einen anderen Wert ändern 

2
user1284907

Ich habe etwas geschrieben, das feststellt, ob die Seite den Anker enthält, auf den geklickt wurde, und wenn nicht, wird die normale Seite aufgerufen.

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

    var target = this.hash;
    var $target = $(target);
    console.log(targetname);
    var targetname = target.slice(1, target.length);

    if(document.getElementById(targetname) != null) {
         e.preventDefault();
    }
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-120 //or the height of your fixed navigation 

    }, 900, 'swing', function () {
        window.location.hash = target;
  });
});
0
John-Henry