手风琴需要在打开时滚动到顶部 Javascript
Accordion needs to scroll to the top upon opening Javascript
我熟悉 jQuery,但不熟悉 Javascript。我在 javascript 中有一个手风琴功能,我需要手风琴面板在单击时滚动到打开面板的顶部。现在它在打开时滚动到面板的底部。这是我正在使用的点击功能...提前致谢!
myAPP.AccordionPanel = function ( headingEl, panelHolder, index ) {
// The AccordionPanel Class controls each of the collapsable panels spawned from Accordion Class
var self = this;
this.panelHolder = panelHolder;
this.index = index;
this.headingEl = headingEl; // this is the clickable heading
this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] );
this.isSelected = false;
this.setupAccessibility();
this.headingEl.addEventListener( "click", function () {
if (self.isSelected){
self.unselect(); // already open, presume user wants it closed
}
else {
self.panelHolder.resetPanels(); // close all panels
self.select(); // then open desired panel
}
return false;
});
return this;
};
您可以访问您正在单击的元素,您可以调用如下所示的函数来滚动到它。如果您点击的不是那个,您将需要一个参考。
从这里解放出来的功能 - http://itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
scrollTo(0, elmYPosition('idstring'));
//html
<div id="idstring">scroll to me</div>
我熟悉 jQuery,但不熟悉 Javascript。我在 javascript 中有一个手风琴功能,我需要手风琴面板在单击时滚动到打开面板的顶部。现在它在打开时滚动到面板的底部。这是我正在使用的点击功能...提前致谢!
myAPP.AccordionPanel = function ( headingEl, panelHolder, index ) {
// The AccordionPanel Class controls each of the collapsable panels spawned from Accordion Class
var self = this;
this.panelHolder = panelHolder;
this.index = index;
this.headingEl = headingEl; // this is the clickable heading
this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] );
this.isSelected = false;
this.setupAccessibility();
this.headingEl.addEventListener( "click", function () {
if (self.isSelected){
self.unselect(); // already open, presume user wants it closed
}
else {
self.panelHolder.resetPanels(); // close all panels
self.select(); // then open desired panel
}
return false;
});
return this;
};
您可以访问您正在单击的元素,您可以调用如下所示的函数来滚动到它。如果您点击的不是那个,您将需要一个参考。
从这里解放出来的功能 - http://itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
scrollTo(0, elmYPosition('idstring'));
//html
<div id="idstring">scroll to me</div>