jQuery、WordPress - 单击按钮 ID 以显示侧边栏，但也可以滚动到它

Question

首先，预先感谢您支持我的问题。

我相信结果会很简单；但我有一个 WordPress 按钮，id 为“sidebar-toggle”，它表示为带有 css 的图标。单击此按钮时，会出现侧边栏，再次单击(关闭)时，侧边栏会隐藏。

但是，这是我的 index.php 页面，它显示最新的帖子。因此，当侧边栏出现时，它会一直显示在页面下方，在最新帖子的下方。

当单击按钮时，您如何最好地利用 jQuery 成功向下滚动到侧边栏 div？

CSS

<button id="sidebar-toggle" class="sidebar-toggle"></button>

HTML

<div id="sidebar" class="sidebar"> 
<div id="sidebar-inner" class="sidebar-inner">
// all inner content e.g. text is here
</div>
</div>

jQuery

jQuery(document).ready(function() {
jQuery("#sidebar-toggle").live("click", function(event){
jQuery('html,body').animate({ scrollTop:$('#sidebar').offset().top});
// the sidebar doesn't appear until clicked - problem when scrolling?
});
});

编辑的 JQUERY

        jQuery(function() {
   jQuery("#sidebar-toggle").on( "click", function() { //Click

        if (jQuery("#sidebar").is(":visible")) { //Check to see if element is visible then scroll to it
            jQuery('html,body').animate({ //animate the scroll
                scrollTop: $('#sidebar').offset().top 
            }, "slow")
        }
    });
  return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
});
});

Answer 1

I have created a simle example of how it should work. Hope it will help you :)

$(function() {
    $( "#sidebar-toggle" ).on( "click", function() { //Click
	  $( "#sidebar" ).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 
				}, "slow")
			}
		});
	  return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
	});
});

.sidebar{ margin-top:500px; height:500px; width:200px; background:red;display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="sidebar-toggle" class="sidebar-toggle">toggler</button>

<div id="sidebar" class="sidebar"> 
<div id="sidebar-inner" class="sidebar-inner">
// all inner content e.g. text is here
</div>
</div>

只检查 if 语句:

   jQuery(function() {
    if (jQuery('#sidebar').is(":visible")) { //Check to see if element is visible then scroll to it
                    jQuery('html,body').animate({ //animate the scroll
                        scrollTop: jQuery('#sidebar').offset().top 
                    }, "slow")
                }
)};