使用帶有標籤的圖片的定位標記滾動動畫

Question

下面的代碼爲我的同頁錨定鏈接<a href="#contact">Contact</a>設置了動畫，但如果將其與圖像<a href="#to-top"><img src="images/logo.png"></a>結合使用，則動畫不起作用。使用圖片時，點擊會將您帶到目的地，但沒有動畫。

目的地有這樣的格式：<div id="contact">...</div>。

任何想法我做錯了什麼？

$('a').click(function(){ // I tried changing the 'a' to 'img', to no avail... 
    var topoffset = 68; 
    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top-topoffset+2 
    }, 800); 
    return false; 
}); 

Answer 1

，但如果我的圖像結合起來動畫不起作用。使用圖片時，點擊 會將您帶到目的地，但沒有動畫。

似乎在stacksnippets上執行動畫效果？

$('a').click(function(){ // I tried changing the 'a' to 'img', to no avail... 
 
    var topoffset = 68; 
 
    $('html, body').animate({ 
 
     scrollTop: $($.attr(this, 'href')).offset().top-topoffset+2 
 
    }, 800); 
 
    return false; 
 
});

#contact { 
 
    position:relative; 
 
    top:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a title="click" href="#contact"><img src="http://lorempixel.com/50/50/technics/" /></a> 
 
<div id="contact">...</div>

Answer 2

我想通了這一點。我將腳本移動到頁面底部，問題自行解決。