在 jQuery UI Accordion 脚本中添加 ScrollTo
我到处搜索，但没有找到对我的具体情况有帮助的帖子。我是 jQuery 的新手，喜欢它的广泛用途。我的手风琴脚本有问题，我需要添加 ScrollTo，以便当选择某个部分时，如果它位于视图上方，它会向上滚动窗口。我希望这是有道理的。谢谢你的帮助。
<script type="text/javascript">
/* <![CDATA[ */
jQuery().ready(function(){
jQuery('#leftnav-navigation').accordion({
active: false,
header: '.head',
navigation: true,
collapsible: true,
animated: 'easeslide',
autoheight: false,
alwaysOpen: false,
});
var accordions = jQuery('#leftnav-navigation');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1);
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
return false;
});
/* ]]> */
</script>
感谢ckaufman 的帮助。这是最终的工作代码。我希望这可以帮助有需要的人。
<script type="text/javascript">
/* <![CDATA[ */
jQuery().ready(function(){
jQuery('#leftnav-navigation').accordion({
active: false,
header: '.head',
navigation: true,
collapsible: true,
animated: 'easeslide',
autoheight: false,
alwaysOpen: false,
});
var accordions = jQuery('#leftnav-navigation');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1);
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
jQuery('#leftnav-navigation').click(
function() {
var window_top = $(window).scrollTop();
var div_top = $(this).offset().top;
if (window_top > div_top){
$('html, body').animate({scrollTop:div_top}, 300);
}
});
return false;
});
/* ]]> */
</script>
I've search high and low and have not found a post that has helped my specific situation. I am new to jQuery and love its wide range of uses. I have an issue with my accordion script and I need to add the ScrollTo so that when a section if selected it scrolls the window up if it is above the view. I hope this makes sense. Thank you for the help.
<script type="text/javascript">
/* <![CDATA[ */
jQuery().ready(function(){
jQuery('#leftnav-navigation').accordion({
active: false,
header: '.head',
navigation: true,
collapsible: true,
animated: 'easeslide',
autoheight: false,
alwaysOpen: false,
});
var accordions = jQuery('#leftnav-navigation');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1);
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
return false;
});
/* ]]> */
</script>
Thanks to ckaufman for his help. Here is the final working code. I hope this helps someone in need.
<script type="text/javascript">
/* <![CDATA[ */
jQuery().ready(function(){
jQuery('#leftnav-navigation').accordion({
active: false,
header: '.head',
navigation: true,
collapsible: true,
animated: 'easeslide',
autoheight: false,
alwaysOpen: false,
});
var accordions = jQuery('#leftnav-navigation');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1);
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
jQuery('#leftnav-navigation').click(
function() {
var window_top = $(window).scrollTop();
var div_top = $(this).offset().top;
if (window_top > div_top){
$('html, body').animate({scrollTop:div_top}, 300);
}
});
return false;
});
/* ]]> */
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为沿着这些思路的一些事情可能会起作用。我会解释一下，也许通过一些调整你就可以实现它。
单击绑定的事件将检测“div_top”和“window_top”...如果div位于window_top上方，它将滚动到div_top的位置。值得一试，希望有帮助。
I think something along these lines may work. I'll explain and maybe with some tweaking you can implement it.
The click binds the event which will detect the 'div_top' and 'window_top'... If the div is above the window_top it will scroll to the location of div_top. Worth a try, hope it helps.
实际上，我已经这样做了...
您需要将 jQuery 的scrollTo.js 添加到您的项目中，然后将 ui.accordion.js 文件替换为 JSFiddle 中提供的文件： http://jsfiddle.net/Jaybles/6EWAF/
Actually, I have already done this...
You need to add jQuery's scrollTo.js to your project, and then replace the
ui.accordion.jsfile with the one in the JSFiddle provided: http://jsfiddle.net/Jaybles/6EWAF/