2

ナビゲーションボタンがクリックslideToggleされたときに を表示するために使用しています。div動作していますが、div私が表示している はかなり背が高いので、ロードすると実際にはあまり見えません。divは、トリガーに使用するボタンのすぐ下にありますslideToggle。への道を見つけslideToggleてdiv、ウィンドウをナビゲーションボタンまでスクロールし、以前に非表示だった全体を自動的に表示したいと思いますdiv。

<a href="#">slideToggle関数が実行される前に要素にジャンプしようとするため、機能しません。完了後にウィンドウを要素にスクロールさせる方法はありますslideToggleか?

ここで私がこれまでに持っているものを見ることができます。

ボタンをクリックして、printables私が話していることを確認してください。

また、基本機能の jsFiddle である jsfiddle も作成しました。

4

3 に答える 3

2

Chad と Robert によって提供された 2 つの回答はどちらも有効ですが、少し異なる方法で書きたいと思います。

以下は、jsFiddle に基づく例です。JS は必要な部分です。

$(function() {
    $( "#button" ).on( "click", function() { //Click
	  $( "#content" ).slideToggle( "slow", function(){
			if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
				$('html,body').animate({ //animate the scroll
					scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
				}, "slow")
			}
		});
	  return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
	});
});
/* This is for the example */
#button{
    display: block;
    margin: auto;
    margin-top:130px;
    height: 50px;
    width: 180px;
    background-color: #ccc;
}
#content{
    display: none;
    margin: 0 auto;
    height: 1200px;
    width: 170px;
    background-color: blue;
}
<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="button">Click to expand content</a>
    
<div id="content">
</div>

于 2015-07-12T04:26:12.073 に答える
2 
$('a').click(function(event){
    event.preventDefault();

    $(element).slideToggle(250, function(){
        window.location.hash = "#content";
    });
});

動作するはずです。

于 2013-09-06T21:12:54.153 に答える
2

ロバートの答えに便乗して、ハッシュを使用しないことで少しきれいにすることができます。

$('a').click(function(event){
    event.preventDefault();
    $a = $(this);

    $(element).slideToggle(250, function(){
        $(window).scrollTop($a.offset().top);
    });
});
于 2013-09-06T21:21:26.610 に答える