如何實現水平和垂直平滑滾動

Question

我一直在組建一個個人項目。我對Java相對來說比較陌生，因此隨時隨地進行分析。

基本上我創建了一個網站，其中有沿x和y軸可訪問的部分。

我已經使用錨鏈接訪問這些部分，所以網站鏈接到這些div。

我也設法設置了垂直平滑滾動動畫。所以，我的網頁可以自動上下滾動無縫使用下面的代碼：

$(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; 
    }); 
    }); 
    }); 

不過，我似乎無法得到相同的滾動影響申請div的位於左/右。我想要發生的是，如果我點擊一個鏈接應該去左側或右側的Div（離屏），它會做一個類似的無縫平滑向左或向右滾動，同時保持相同的向上/向下動畫。

基本上我想同時應用垂直和水平平滑滾動。

我需要做些什麼改變或補充來應用？

---

我設法通過對上述代碼進行一些調整，在我的網站上植入水平滾動。

$(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; 
    }); 
    }); 
    }); 

這似乎適用於水平滾動。現在我需要讓這些工作在同一時間...

我已經添加到一個單獨的文件，並在我的HTML中引用它們。但現在只有水平的作品。無論如何，使兩者同時工作？

Answer 1

我終於找到了答案，並將其發佈以供將來參考和援助。

基本上當我說我想同時使用垂直和水平自動滾動我不是說對角線自動滾動。我只是說我在一個頁面上有多個鏈接。一些應該自動滾動到Y軸的不同部分，一些自動滾動X軸。

爲此，我使用以下代碼創建了2個Js文件，並在我的html中引用了它們。我還在我的所有鏈接中定義了一個類，以指定應該關聯哪個js文件。例如'上'是我的上/下自動滾動;

垂直滾動：

$(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; 
    }); 
    }); 
}); 

水平滾動：

$(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用於分配一個類的鏈接;

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

js文件中引用的類如上所示;

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

我遇到的問題如下。垂直和水平代碼衝突。他們都使用;

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

這意味着當鏈接被點擊時它執行的動作。當鏈接被觸發時，沒有什麼可以區分動作應該走向哪個方向。

通過改變這個;

$('a.up').on('click' 

並將類引入我的鏈接我可以指定哪些鏈接應該觸發哪個JS文件並按預期工作。

我希望這可以幫助任何人有類似的問題，或只是尋找一些與自動滾動的援助。

隨時提問。 :)