2016-11-20 2 views
0

クリックするたびにdivにスクロールするこのJSコードがあります。しかし、それは一番上にDIVを示しています。 90pxの高さの固定ヘッダーがあり、divがその背後にあるので、これは問題を引き起こします。 DIVのタイトルは表示されません。トップ機能にスクロールするときの最小高さを追加

このコードを変更して、DIVが一番上までスクロールせず、特定の高さの90pxを残すようにしたいと思います。スクリーンショットを参照してください、それが固定ヘッダの後ろに隠している様子がわかり:enter image description here

これは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; 
     } 

    }; 
+1

試してみますあなたのCSS。 –

+0

@badjujuそれは 'div'sの間にギャップを作成しませんか? – Ouroborus

+0

あなたのHTMLを表示すると私はあなたに連絡します –

答えて

1

あなただけのこの行を変更するようにコードを修正して逃げることができるかもしれ:

これに
var stopY = elmYPosition(eID); 

: `div` iの先頭に` 90px`マージンを加え

var stopY = elmYPosition(eID) - 90; 
+0

ありがとうございます。私はこれを試し、代わりに90pxを追加しました。したがって、うまくいきませんでした。あなたの時間を感謝します。 –

関連する問題