水平スムーススクロールとスムーススクロールの両方を実装する方法

Question

私は個人的なプロジェクトをまとめています。私はJavaには比較的新しいので、私は一緒にそれを拾う。

基本的には、x軸とy軸の両方にアクセスしたいセクションがあるサイトを作成しました。

アンカーリンクを使用してこれらのセクションにアクセスできるようにしているため、サイトはこれらのdivにリンクしています。

私は垂直スムーススクロールアニメーションを設定することもできました。私は同じスクロールの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に行くリンクをクリックするとします。

基本的に、同じページに縦スクロールと横スムーススクロールの両方を適用したいと考えています。

これを適用するためにどのような変更や追加が必要ですか？

---

私は上記のコードにいくつか調整を加えることで、自分のサイトで水平スクロールを行うことができました。

$(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ファイルをトリガーして、期待どおりに動作するかを指定できるようになりました。

これは、同じような問題を抱えている人や、自動スクロールの助けを借りている人に役立ちます。

お気軽に質問してください。 :)