ScrollTo Script blockt Links mit Anker

ScrollTo Script blockt Links mit Anker | PSD-Tutorials.de

Erstellt von rumpelz, 16.01.2019.

  1. rumpelz

    rumpelz Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    14.09.2011
    Beiträge:
    27
    Geschlecht:
    männlich
    ScrollTo Script blockt Links mit Anker
    Hallo liebe Gemeinde,
    ich habe auf meiner Website ein Script eingebunden, welches das sanfte Scrollen von Anker zu Anker innerhalb der einzelnen Seiten ermöglicht.

    $('a[href*="#"]').on('click',function(e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $('html, body').stop().animate({
    'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
    window.location.hash = target;
    });
    });

    Das ganze basiert auf: jquery-3.2.1.min.js. Das funktioniert auch gut, außer ich habe einen Link der auf eine andere Seite zeigt UND dort einen Anker als Ziel hat.
    In meinem Fall wäre das:
    <a class="nav-link" href="rechtliches.php#datenschutzerklaerung">Datenschutzerklärung</a>
    Dieser Link stellt sich quasi tot. Außer ich deaktiviere das Script dann klappt es.

    Das Script bewirkt ja das alle Links mit einem SoftScrolleffekt angesteuert werden. Eigentlich eine Super Sache wäre nur das oben beschriebene Problem nicht. Ich selber kann kein JavaScript und es wäre toll wenn jemand das Script so ändern könnte das es generell eingebunden werden kann.

    Ok, vielen Dank mal, ich bin gespannt auf eure Antworten.
    Gruss rumpelz
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.261
    Geschlecht:
    männlich
    Ort:
    Ö
    ScrollTo Script blockt Links mit Anker
    Dieser Selektor $('a[href*="#"]') wird für jeden Link aktiviert, welches ein # beinhaltet. Du kannst den Selektor so abändern, dass nur Links betroffen sind, die auf der aktuellen Seite sind (mit # Beginnen): $('a[href^="#"]')
     
    #2      
  4. rumpelz

    rumpelz Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    14.09.2011
    Beiträge:
    27
    Geschlecht:
    männlich
    ScrollTo Script blockt Links mit Anker
    Vielen Dank, das war die Lösung! Jetzt kenne ich auch den Unterschied zwischen * und ^.
     
    #3      
  5. Curanai

    Curanai Aktives Mitglied

    Dabei seit:
    20.08.2011
    Beiträge:
    462
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Notepad++, Brackets, HeidiSQL, CC, FL Studio, SEO PowerSuite, Rocksmith :D
    Kameratyp:
    Samsung S7 Edge :D
    ScrollTo Script blockt Links mit Anker
    Für Selektoren – nur der Vollständigkeithalber – gibt es eine feine Übersicht: jQuery
     
    #4      
  6. rumpelz

    rumpelz Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    14.09.2011
    Beiträge:
    27
    Geschlecht:
    männlich
    ScrollTo Script blockt Links mit Anker
    Ok vielen Dank, ich möchte auch noch erwähnen, dass ich für einen Link noch ein zusätzliches Script einbinden musste:
    Link:
    <a class="nav-link" href="rechtliches.php#datenschutzerklaerung">Datenschutzerklärung</a>
    Script:
    <!-- Dieses Script nur hier wegen Navi ! -->
    <script type="text/javascript">
    $('a[href^="rechtliches.php#datenschutzerklaerung"]').on('click',function(e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    $('html, body').stop().animate({
    'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
    window.location.hash = target;
    });
    });
    </script>
    Wichtig ist das dieses Script nur in der Datei "rechtliches.php" eingebunden wird. Würde ich es z.B. bei Index.php einbauen dann würde sich der Link totstellen.
     
    #5      
  7. Curanai

    Curanai Aktives Mitglied

    Dabei seit:
    20.08.2011
    Beiträge:
    462
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Notepad++, Brackets, HeidiSQL, CC, FL Studio, SEO PowerSuite, Rocksmith :D
    Kameratyp:
    Samsung S7 Edge :D
    ScrollTo Script blockt Links mit Anker
    Erlaubst Du mir einen Optimierungsvorschlag? Bestimmt ...

    Du reagierst nur auf den Klick mit der jetzigen Variante. Was passiert, wenn Du jemandem den Link (wie in href angegeben) gibst oder jemand diesen Link als Favorit speichert? Durch den Eventhandler "onclick" passiert also bei Wiederaufruf gar nichts. Sorge also auch noch mittels einem $(function(){ ... }; dafür, dass window.location.hash auf ein Hashtag befragt wird - falls eines da ist, soll er sich auf der Seite benehmen wie mit Eventhandler. ;)

    Dass Dein Script nur auf rechtliches.php läuft, ließe sich mit window.location.href und indexOf() abgleichen.
     
    #6      
  8. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.261
    Geschlecht:
    männlich
    Ort:
    Ö
    ScrollTo Script blockt Links mit Anker
    Es passiert schon etwas, es wird nämlich automatisch zu dem betroffenen Punkt gescrolled. Es fällt also die Animation weg, aber ehrlich gesagt: Als User will ich, wenn ich einen Link öffne gleich dort landen, wo ich hin will. Ausnahme kann da für mich persönlich nur sein, wenn es sich um einen Link auf der selben Seite handelt, dann ist es oft verständlicher wenn der Sprung mittels Animation erfolgt (so wie in dem Ursprungspost gemacht)
    Für mich wäre diese Optimierung also eindeutig eine Verschlechterung für den Benutzer.
    Ich glaube es würde nicht ausreichen, hier nur einen on document ready eventlistener hinzuzufügen und diesen dann scrollen zu lassen, es müsste doch explizit die Scrollposition auf "ganz oben" gesetzt werden (da der Browser sonst ja automatisch zum Link springt). das ist jetzt aber nur eine Annahme meinerseits, den Teil habe ich nicht ausprobiert.
     
    #7      
  9. rumpelz

    rumpelz Noch nicht viel geschrieben Kreativ-Flatrate-User

    Dabei seit:
    14.09.2011
    Beiträge:
    27
    Geschlecht:
    männlich
    ScrollTo Script blockt Links mit Anker
    #8      
Seobility SEO Tool
x
×
×