以水平布局命名的锚点

Question

在我正在开发的站点中，我有一堆不同大小的图像以水平布局布置。我也有一些命名的锚链接，可以在点击时跳转到特定的图像。如果点击链接，我需要将所选图像放在页面的中心，而不是最后。有没有办法给锚点添加一些负偏移量？

在此先感谢

HTML：

<a href="#item-9">Link to item 9</a> 
<div class="carousel-frame"> 
    <ul> 
    <li id="item-1" class="carousel-item"> 
     <span>1</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-2" class="carousel-item"> 
     <span>2</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-3" class="carousel-item"> 
     <span>3</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-4" class="carousel-item"> 
     <span>4</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-5" class="carousel-item"> 
     <span>5</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-6" class="carousel-item"> 
     <span>6</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-7" class="carousel-item"> 
     <span>7</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-8" class="carousel-item"> 
     <span>8</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-9" class="carousel-item"> 
     <span>9</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-10" class="carousel-item"> 
     <span>10</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-11" class="carousel-item"> 
     <span>11</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-12" class="carousel-item"> 
     <span>12</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-13" class="carousel-item"> 
     <span>13</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-14" class="carousel-item"> 
     <span>14</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-15" class="carousel-item"> 
     <span>15</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    <li id="item-16" class="carousel-item"> 
     <span>16</span> 
     <img src="http://placehold.it/200x150" /> 
    </li> 
    </ul> 
</div> 

CSS：

.carousel-frame { 
    width: 100%; 
    margin-bottom: 0.5em; 
    padding-bottom: 1em; 
    position: relative; 
    white-space: nowrap; 
} 
.carousel-frame ul { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    list-style: none; 
} 
.carousel-frame li.carousel-item { 
    cursor: pointer; 
    display: inline-block; 
    margin: 0 5px 0 0; 
    padding: 0; 
} 
.carousel-frame li.carousel-item span { 
    display: block; 
} 

这里有一个小提琴：

https://jsfiddle.net/z4524opd/2/

Answer 1

您可以使用animate：

$('a[href^="#item-"]').on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    // select the carousel-frame 
 
    var divCarousel = $('.carousel-frame'); 
 

 
    // select the corresponding carousel-item 
 
    var objToMove = divCarousel.find(this.getAttribute('href')); 
 

 
    // compute the new left position 
 
    var newPos = (objToMove.position().left - divCarousel.width()) + (divCarousel.width() + objToMove.width())/2; 
 

 
    // move to the new position 
 
    divCarousel.animate({left: -newPos}, 2000); 
 
})

.carousel-frame { 
 
    width: 100%; 
 
    margin-bottom: 0.5em; 
 
    padding-bottom: 1em; 
 
    position: relative; 
 
    white-space: nowrap; 
 
} 
 
.carousel-frame ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    list-style: none; 
 
} 
 
.carousel-frame li.carousel-item { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    margin: 0 5px 0 0; 
 
    padding: 0; 
 
} 
 
.carousel-frame li.carousel-item span { 
 
    display: block; 
 
} 
 

 
a { 
 
    text-decoration: none; font: menu; 
 
    display: inline-block; padding: 2px 8px; 
 
    background: ButtonFace; color: ButtonText; 
 
    border-style: solid; border-width: 2px; 
 
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a href="#item-1"> item 1</a> 
 
<a href="#item-2"> item 2</a> 
 
<a href="#item-3"> item 3</a> 
 
<a href="#item-4"> item 4</a> 
 
<a href="#item-5"> item 5 </a> 
 
<a href="#item-6"> item 6</a> 
 
<a href="#item-7"> item 7</a> 
 
<a href="#item-8"> item 8</a> 
 
<a href="#item-9"> item 9</a> 
 
<a href="#item-10"> item 10</a> 
 
<a href="#item-11"> item 11</a> 
 
<a href="#item-12"> item 12</a> 
 
<a href="#item-13"> item 13</a> 
 
<a href="#item-14"> item 14</a> 
 
<a href="#item-15"> item 15</a> 
 
<a href="#item-16"> item 16</a> 
 
<div class="carousel-frame"> 
 
    <ul> 
 
     <li id="item-1" class="carousel-item"> 
 
      <span>1</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-2" class="carousel-item"> 
 
      <span>2</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-3" class="carousel-item"> 
 
      <span>3</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-4" class="carousel-item"> 
 
      <span>4</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-5" class="carousel-item"> 
 
      <span>5</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-6" class="carousel-item"> 
 
      <span>6</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-7" class="carousel-item"> 
 
      <span>7</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-8" class="carousel-item"> 
 
      <span>8</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-9" class="carousel-item"> 
 
      <span>9</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-10" class="carousel-item"> 
 
      <span>10</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-11" class="carousel-item"> 
 
      <span>11</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-12" class="carousel-item"> 
 
      <span>12</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-13" class="carousel-item"> 
 
      <span>13</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-14" class="carousel-item"> 
 
      <span>14</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-15" class="carousel-item"> 
 
      <span>15</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
     <li id="item-16" class="carousel-item"> 
 
      <span>16</span> 
 
      <img src="http://placehold.it/200x150" /> 
 
     </li> 
 
    </ul> 
 
</div>