クリックするたびにdivにスクロールするこのJSコードがあります。しかし、それは一番上にDIVを示しています。 90pxの高さの固定ヘッダーがあり、divがその背後にあるので、これは問題を引き起こします。 DIVのタイトルは表示されません。トップ機能にスクロールするときの最小高さを追加
このコードを変更して、DIVが一番上までスクロールせず、特定の高さの90pxを残すようにしたいと思います。スクリーンショットを参照してください、それが固定ヘッダの後ろに隠している様子がわかり:
これはJasvascriptです:
this.scrollTo = function(eID) {
// This scrolling function
// is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance/100);
if (speed >= 20) speed = 20;
var step = Math.round(distance/25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for (var i=startY; i<stopY; i+=step) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for (var i=startY; i>stopY; i-=step) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if (self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6 - standards mode
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}
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;
}
};
試してみますあなたのCSS。 –
@badjujuそれは 'div'sの間にギャップを作成しませんか? – Ouroborus
あなたのHTMLを表示すると私はあなたに連絡します –