jQuery: Blättern Sie zu verankern, wenn URL aufrufen, ersetzen Browser Verhalten

Question

Ich weiß schon, die jQuery-Plugin scrollTo, aber ich fand keinen Weg, um jetzt bis zu realisieren wie folgt vor:

Der Anwender bekommt auf meiner Website (durch Eingabe, nicht durch einen Link auf meiner Seite klicken) domain.com/bla.php#foo

und der Anker "#foo" existiert. Jetzt möchte ich, dass der Browser des Benutzers nicht automatisch blättern zu „#foo“, stattdessen möchte ich glatt blättern, so dass das Element ‚#foo‘ etwa in der Mitte der Ansicht und nicht auf die absolute Spitzenposition der Benutzer anzeigen.

Dank so weit!

Answer 1

Wenn Sie nicht schaffen den eigentlichen Anker foo, sondern erstellen Sie Ihre Anker mit einem id wie _foo (so etwas wie <a id="_foo">). Sie können die $(document).ready handhaben dies zu erreichen.

So etwas wie (Pseudo-Code)

$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {
         $.scrollTo(elem.left, elem.top);
    }
});

Answer 2

habe ich einige Erweiterung Skript von Jan Jongboom, so dass es jetzt so aussieht:

$(document).ready(function () {
    // replace # with #_ in all links containing #
    $('a[href*=#]').each(function () {
        $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    });

    // scrollTo if #_ found
    hashname = window.location.hash.replace('#_', '');
    // find element to scroll to (<a name=""> or anything with particular id)
    elem = $('a[name="' + hashname + '"],#' + hashname);

    if(elem) {
         $(document).scrollTo(elem, 800);
    }

});

Es ändert alle Anker in Links so für Benutzer ohne Javascript wird das Verhalten unberührt bleiben.

Answer 3

Machineghost Antwort war sehr hilfreich. Der Code, den ich zusammenzugeflickt nimmt eine URL param und verwandelt es in einen Hash-Tag, dass der Browser dann scrollt, sobald das DOM bereit ist.

Die URL würde wie folgt aussehen:

www.mysite.com/hello/world.htm?page=contact

Kontakt ist der Name der ID Sie möchten blättern zu

<h1 id="contact">Contact Us</h1>

Hier ist der Code:

// Get any params from the URL
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var url = decodeURIComponent(window.location.href);
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
 }
});

$(document).ready(function() {
    // Unhide the main content area
    $('section.centered').fadeIn('slow');

    // Create a var out of the URL param that we can scroll to
    var page = $.getUrlVar('page');
    var scrollElement = '#' + page;

    // Scroll down to the newly specified anchor point
    var destination = $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
});

Ich habe dies in Chrome und FF und es funktionierte sehr gut. Versuchen Sie Einstellung „Ziel-75“, wenn die Scroll-Ziel nicht auf den genauen Ort wollen Sie es möchten.

kann ich es nicht getan hätte mit heraus dem Pfosten oben, so danke!

Answer 4

/* scrolling to element */
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
    $('a').click(function(){
        var hashEle = $(this).attr('href').split('#');
        if (hashEle.length > 1) {
            if (hashEle[1] == 'top') {
                $('body, html').animate({
                    scrollTop: 0
                },500);
            } else {
            jQuery('body, html').animate({
                scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
            },500);
            }
        };
    })
        // find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
    if(hashname == 'top') {
    $('body, html').animate({
            scrollTop: 0
        },200); 
    } else {
     $('body, html').animate({
            scrollTop: $(elem).offset().top - headerHeight
        },500);
 }
};
/* END scrolling to element */

Dieses Skript in $ sein sollte (document) .ready (function () {});

Answer 5

Sie können nach wie vor scrollTo verwenden. Sie würden wollen, um die Seite ohne Anker darin zu machen und dann mit JavaScript, das ausgeführt wird, wenn die Seite geladen wird, um den Anker aus der URL zu erhalten. Anschließend können Sie diesen Text zu blättern zu einer bestimmten ID verwenden.

Nicht sicher, wie das Element in der Mitte der Seite zu bekommen, aber Sie können eine für das Scrollen Offset angeben.

Answer 6

Ich will nicht sagen, dass dies unmöglich ist, aber ... es wird zumindest aber recht schwierig sein. Der Browser (oder zumindest alle, die ich kenne) blättern zum Ankerpunkt, sobald dieser Teil der Seite geladen wird; AFAIK gibt es keine Javascript-basierten Weg, dies zu vermeiden (Sie ein Browser-Plug-in benötigen würde oder etwas).

Aber ich denke, Sie eine Variante eines zu verwenden, könnte der Lage sein, „zeigen nicht die Seite, bis die Seite vollständig geladen ist“ Skript möglicherweise erhalten das Verhalten Sie wollen. Mit anderen Worten: Sie würde:

1. Ausblenden alle Ihres Seiteninhaltes Vorbelastung (dh ein DIV, die Ihre ganze Seite Wraps, und legt einen „display: none“. Stil drauf)

2. Schließen Sie einen "onLoad" Event-Handler auf der Seite, die Ihr DIV un-versteckt, und ...

3. In der gleichen Event-Handler „onload“, verwenden Sie einen Standard-JS-Scrolling-Mechanismus (ie.ScrollTo) mit dem Anker zu blättern (ich glaube, Sie in der Lage sein werden, auf die Anker zu blättern, um zu bestimmen durch Fenster überprüfen. Standort)

In der Theorie, weil der Browser Browser-Scroll zwischen # 1 und # 2 (und da gibt es nirgendwo zu blättern zu, was mit dem Inhalt versteckt und alle, ich denke, es wird nicht nur überhaupt etwas tun), der Scroll-Mechanismus Sie in # 3 verwenden soll keine Störungen hat.

That being said, alle der oben genannten ist ein vollständig ungetestet Plan; Ihre Meilen meines variieren. Auch wenn es funktioniert, es wird ein Schmerz zu implementieren, so dass, wenn Sie wirklich will dieses Verhalten, es ist fast schon gar nicht die Mühe wert.

Answer 7

, die nicht möglich ist,

Bearbeiten

das Verhalten ist vollständig in den Händen der UA.