div
をクリックして中央に配置したいと思います。したがって、div
をクリックしている場合は、ブラウザのビューポートの中央までスクロールします。私が見たガイドや例のようなアンカーポイントは使いたくありません。どうすればこれを達成できますか?
何らかの方法で、クリック可能な要素を特定する必要があります。そのためにclass
-属性を使用する例を作成します。
これは、作業を行うスクリプトです。
$('html,body').animate({
scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);
あなたが試したのは、コンテナをページの一番上までスクロールすることです。また、コンテナの高さとビューポートの高さの差を計算して差し引く必要があります。これを2で割ります(上下に同じスペースを作りたいので、準備ができています。
次に、クリックハンドラーをすべての要素に追加します。
$(document).ready(function () {
$('.image').click( function() {
$('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2 }, 200);
});
});
HTML/CSSを設定します。
<style>
div.image {
border: 1px solid red;
height: 500px;
width: 500px;
}
</style>
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
これで完了です。
自分で試してみてください http://jsfiddle.net/insertusernamehere/3T9Py/
提供するわずかな変更が1つあります。 「調整係数」(つまり、($(window).height()-$(this).outerHeight(true))/ 2)が0未満の場合、望ましくない結果が得られ、ビューポートのその要素をスクロールでオーバーシュートする可能性があります。修正するためにmax(0、adjustment factor)を追加しました:
function scrollIntoView(el) {
var offsetTop = $j(el).offset().top;
var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
var scrollTop = offsetTop - adjustment;
$j('html,body').animate({
scrollTop: scrollTop
}, 200);
}
HTMLElement.prototype.scrollToCenter = function(){
window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}
垂直方向に中央にスクロールするための純粋なJavaScriptで実現。そして、それは水平方向でも同様です。要素の高さは画面の高さよりも大きい可能性があるため、考慮していません。