2016-10-17 11 views
0

HTML:オフセットブートストラップオフセットscrollspyと滑らかアニメーション

<div id="mark" class="container"> 
    <div class="col-xs-12"> 
     <img src="/images/newdesk3.jpg" width="60px"> 
     <span>Lorem ipsum dolor</span> 

     <div id="t3"><button class="btn btn-warning">Buy Now</button></div> 
     <div id="t2"><a href="#oneeye">Technical</a></div> 
     <div id="t1"><a href="#similarproducts">Product presentation</a></div> 
    </div> 
</div> 
... 
<div id="similarproducts"> 
... 
</div> 
<div id="oneeye"> 
... 
</div> 

のjQuery:

var offset = 80; 
$('#t2 a, #t1 a').click(function(event) { 
    event.preventDefault(); 

    $($(this).attr('href'))[0].scrollIntoView(); 
     scrollBy(0, -offset); 
}); 

jQueryの滑らかなアニメーション:

$("#t2 a, #t1 a").on('click', function(event) { 

    if (this.hash !== "") { 

     event.preventDefault();  
     var hash = this.hash; 

     $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
     }, 800, function(){ 

     window.location.hash = hash; 
     }); 
    } 
    }); 

jQueryのオフセットと滑らかアニメーション(スクロール)は、個々の作業をしています私はそれらを一緒に置くときコードとして動作していません。 Bootstrap v3.3.5でjqueryバージョン1.9.1を使用します。

アニメーションでオフセット位置を指定する必要があります。 これらのコードを組み合わせて正しく動作させるための適切なコードjqueryは何ですか?

答えて

0

新しいjQueryのコードは次のようになります

$("#t2 a, #t1 a").on('click', function(event) { 

    if (this.hash !== "") { 

     event.preventDefault();  
     var hash = this.hash; 

     $('html, body').animate({ 
     scrollTop: $(hash).offset().top -80 
     }, 800, function(){ 

     window.location.hash = hash; 
     }); 
    } 
    }); 
関連する問題