Adding ScrollTo in the jQuery UI Accordion 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({
a开发者_如何学运维ctive: 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 think something along these lines may work. I'll explain and maybe with some tweaking you can implement it.
jQuery('#divID').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);
}
});
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.
Actually, I have already done this...
You need to add jQuery's scrollTo.js to your project, and then replace the ui.accordion.js
file with the one in the JSFiddle provided: http://jsfiddle.net/Jaybles/6EWAF/
精彩评论