So implementieren Sie horizontales und vertikales Smooth Scrolling

Question

Ich habe ein persönliches Projekt zusammengestellt. Ich bin relativ neu in Java und nehme es auf, während ich weitermache.

Grundsätzlich habe ich eine Website erstellt, die Abschnitte hat, die entlang der X- und Y-Achse zugänglich sein sollen.

Ich habe diese Abschnitte mit Anker-Links zugänglich gemacht, so dass die Website zu diesen divs verlinkt.

Ich habe es auch geschafft, die vertikale Smooth Scroll-Animation einzurichten. Also meine Seite können Autoscroll oben und unten nahtlos mit dem folgenden Code:

$(document).ready(function(){ 
$('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; 
    }); 
    }); 
    }); 

Allerdings kann ich nicht scheinen, die gleiche Rolle zu holen beeinflussen für die div anzuwenden und befindet sich links/rechts. Was ich möchte, ist, wenn ich auf einen Link klicke, der zu einem Div gehen soll, der sich links oder rechts befindet (außerhalb des Bildschirms), macht er einen ähnlichen nahtlosen glatten Bildlauf nach links oder rechts, während er die gleiche Auf-/Ab-Animation behält.

Grundsätzlich möchte ich sowohl vertikal als auch horizontal glattes Scrollen auf der gleichen Seite anwenden.

Welche Änderungen oder Ergänzungen muss ich vornehmen, um dies zu übernehmen?

Ich habe es geschafft, horizontales Scrollen auf meiner Seite zu implantieren, indem ich einige Verbesserungen an dem obigen Code vorgenommen habe.

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

var target = this.hash; 
var $target = $(target); 

$('html, body').stop().animate({ 
    'scrollLeft': $target.offset().left 
}, 900, 'swing', function() { 
    window.location.hash = target; 
    }); 
    }); 
    }); 

Dies scheint mit horizontalem Scrollen zu funktionieren. Jetzt muss ich diese zusammen zur gleichen Zeit arbeiten lassen ...

Ich habe beide zu einer separaten Datei hinzugefügt und referenzierte sie in meinem HTML. Aber jetzt funktioniert nur die Horizontale. Wie auch immer, um beide zur gleichen Zeit arbeiten zu lassen?

Answer 1

Ich habe es geschafft, am Ende eine Antwort zu finden und werde es für zukünftige Referenz und Hilfe veröffentlichen.

Grundsätzlich, wenn ich sage, ich möchte sowohl vertikale als auch horizontale Auto-Bildlauf verwenden, ich spreche nicht über automatisch scrollen diagonal. Ich meine einfach, ich habe mehrere Links auf einer Seite. Einige, die automatisch zu einem anderen Abschnitt entlang der Y-Achse scrollen sollten, und einige, die automatisch entlang der X-Achse scrollen.

Um dies zu tun, habe ich 2 Js-Dateien mit dem folgenden Code erstellt und referenzierte sie in meinem HTML. Ich habe auch eine Klasse für alle meine Links definiert, um anzugeben, welche js-Datei zugeordnet werden soll. z.B. 'up' war für meine hoch/runter Auto Scroll;

Vertikale Scroll:

$(document).ready(function(){ 
$('a.up').on('click',function (e) { 
    e.preventDefault(); 

    var target = this.hash; 
    var $target = $(target); 

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

Horizontal scroll:

$(document).ready(function(){ 
    $('a.left').on('click',function (e) { 
    e.preventDefault(); 

    var target = this.hash; 
    var $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollLeft': $target.offset().left 
    }, 3000, 'swing', function() { 
     window.location.hash = target; 
    }); 
    }); 
}); 

HTML-Code für eine Klasse zu einer Verknüpfung zuweisen;

<a class="up" href="#tutorial">Link</a> 

Klasse in der js-Datei wie oben gezeigt referenziert;

$('a.up').on('click',function (e) 

Das Problem, das ich hatte, ist wie folgt. Die vertikalen und horizontalen Codes sind in Konflikt geraten.Beide benutzten;

$('a[href^="#"]').on('click' 

Was bedeutet, wenn ein Link geklickt wurde, führte es die Aktion aus. Es gab nichts zu unterscheiden, in welche Richtung die Aktion gehen sollte, wenn die Verbindung ausgelöst wurde.

durch Ändern dieses zu;

und Einführung von Klassen zu meinen Links Ich könnte angeben, welche Links welche JS-Datei auslösen und wie erwartet funktionieren soll.

Ich hoffe, das hilft jedem mit einem ähnlichen Problem oder nur nach etwas Hilfe mit automatischem Scrollen suchen.

Fühlen Sie sich frei, Fragen zu stellen. :)