以下ｿｰｽです｡
＜div class="top_m">
＜ul class=menu>
＜li>＜a href="#ca01" class="scroll">＜img src="c01.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca02" class="scroll">＜img src="c02.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca03" class="scroll">＜img src="c03.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca04" class="scroll">＜img src="c04.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca05" class="scroll">＜img src="c05.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca06" class="scroll">＜img src="c06.png" width="105" height="107"/>＜/a>＜/li>
＜br clear="all" />
＜li>＜a href="#ca07" class="scroll">＜img src="c07.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca08" class="scroll">＜img src="c08.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca09" class="scroll">＜img src="c09.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca10" class="scroll">＜img src="c10.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca11" class="scroll">＜img src="c11.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca12" class="scroll">＜img src="c12.png" width="105" height="106"/>＜/a>＜/li>
＜/ul>
＜script>
$(function() {
$(".scroll").click(function(event){
event.preventDefault();
var url = this.href;
var parts = url.split("#");
var target = parts[1];
var target_offset = $("#"+target).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 1500);
});
});
＜/script>



■CSS
.top_m {
display: block;
position: fixed;
width: 100%;
z-index: 1000;
padding:0;
margin:0;
}
.top_m ul{list-style:none;
padding:0;
margin:0;
}
.top_m li{float: left;
padding:0;
margin:0;
}

こんな感じでどうでしょう(変更点だけ抜粋)｡

<div class="top_m">
 <ul class=menu>
 <!-- ★ img から width と height を削除 -->
 <li><a href="#ca01" class="scroll"><img src="c01.png" /></a></li>
 ...
 </ul>
</div>

<style>
 ...
.top_m li {
 float: left;
 padding:0;
 margin:0;
 line-height: 0; /* ★ LI の line-height をｾﾞﾛに */
}
.menu img {
 width: 16vw; /* ★ 幅の単位は vw で */
}
</style>