[解決済み] jQueryを使用して、要素をビューにスクロールさせるにはどうすればよいですか？

2022-04-22 14:01:45

質問

グリッド形式で画像を表示するHTML文書があります。 <ul><li><img... . ブラウザのウィンドウは、縦スクロールと横スクロールの両方が可能です。

質問です。 画像をクリックすると <img> の位置まで文書全体をスクロールさせるにはどうすればよいですか？ top:20px; left:20px ?

私はJavaScriptにかなり慣れていないので、これがどのように達成されるかを自分自身で理解したいのですが、私はここで同様の投稿を閲覧しました。

どのように動作するのか知りたいということなので、順を追って説明します。

まず、画像のクリックハンドラとして関数をバインドしたいと思います。

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

という画像にクリックハンドラを適用することになります。 id="someImage" . もし、これを すべて の画像に置き換えてください。 '#someImage' をもって 'img' .

では、実際のスクロールのコードです。

画像のオフセット（ドキュメントからの相対値）を取得します。
```
var offset = $(this).offset(); // Contains .top and .left
```
から20を引く。 top と left :
```
offset.left -= 20;
offset.top -= 20;
```
のCSSプロパティであるscroll-topとscroll-leftをアニメートさせます。 <body> と <html> :
```
$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});
```