overflow-x:scrollを適用したdiv要素内をスムーズスクロールしたい

Question

###前提・実現したいこと
アンカーをクリックするとoverflow-x:scrollを適用したdiv要素内を目的のidのdiv要素までスクロールするようにしたいです。

###発生している問題・エラーメッセージ
div.mainの左端に各div.boxの左端がぴったりくるようにスクロールしてほしいのですがうまくいきません。
JSFiddle

###ソースコード

<div class="nav">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
</div>
<div class="main">
    <div class="inner">
        <div id="1" class="box1">1</div>
        <div id="2" class="box2">2</div>
        <div id="3" class="box3">3</div>
        <div id="4" class="box4">4</div>
        <div id="5" class="box5">5</div>
    </div>
</div>

.main {
  overflow-x: scroll;
  width: 150px;
}

.inner {
  display: flex;
  width: 500px;
}

.box1 {
  background-color: red;
  height: 100px;
  width: 100px;
}

.box2 {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.box3 {
  background-color: green;
  height: 100px;
  width: 100px;
}

.box4 {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

.box5 {
  background-color: purple;
  height: 100px;
  width: 100px;
}

$(function(){
	$('a[href^=#]').click(function(e) {
    	e.preventDefault();
    	var href= $(this).attr("href");
    	var target = $(href == "#" || href == "" ? 'html' : href);
    	var position = target.position().left;
		$('.main').animate({scrollLeft:position}, 'fast', 'swing');
		return false;
	});
});

Answer 1

var position = target.position().left - $("#1").position().left;

ではいかがでしょう。
target.position().leftは相対値になっているので$("#1").position().leftとの差を考慮に入れてみました。

Comments

[nktn0224]

回答ありがとうございます。試してみます。