链接到页面底部的锚点会在单击时将您带到页面顶部

Question

我在页面底部做了一个anchor。我把链接放在一组按钮周围，这样当点击时，它们就会激活分配给它们的javascript，并滚动到页面的底部。相反，按钮运行javascript，然后将您带到页面的顶部。

在页面底部交互式酒店定价下面的底部：http://megatravel.co.nf/miami.html

HTML代码片段：

<div class="priceCheck">
    <a href="#bottom">
        <input type="button" class="btn btn-default" name="1star" value="Five Star" onclick="vanish('priceCheck1')" />
        <input type="button" class="btn btn-default" name="2star" value="Four Star" onclick="vanish('priceCheck2')" />
        <input type="button" class="btn btn-default" name="3star" value="Three Star" onclick="vanish('priceCheck3')" />
        <input type="button" class="btn btn-default" name="4star" value="Two Star" onclick="vanish('priceCheck4')" />
        <input type="button" class="btn btn-default" name="5star" value="One Star" onclick="vanish('priceCheck5')" />
    </a>
</div>    

Javascript Snippter(如果需要)：

function vanish(elementName) {
    var el = document.getElementById(elementName);
    if (el.style.display == "block") el.style.display = "none";
    else el.style.display = "block";
}

Answer 1

您可以让链接的默认导航为您，并重新设置按钮的样式。单击将是第一个执行的操作，除非您阻止默认操作，否则导航将转到页面底部，如此代码片段所示。

我添加了一些较大的lorem ipsum，以显示页面实际上按其应有的方式向下滚动。

​

function toggle(nr) {
  var elements = document.getElementsByClassName('stars-' + nr), i, len, element;
  
  for (i = 0, len = elements.length; i < len; i++) {
    element = elements[i];
    if (element.className.indexOf('hidden') >= 0) {
      element.className = element.className.replace('hidden').trim();
    } else {
      element.className = element.className + ' hidden';
    }
  }
}

.button-row a
{
  border: outset #a0a0a0 1px;
  display: inline-block;
  padding: 5px;
  background-color: #efefef;
  color: #000;
  text-decoration: none;
}
.button-row a:hover
{
  border-color: #dfdfdf;
}
.button-row a:active
{
  border-style: inset;
}
.hidden {
  display: none;
}
.box {
  border: solid #a0a0a0 1px;
  background-color: #444444;
  color: #fff;
}

<div class="button-row">
  <a href="#bottom" onclick="toggle(5);">Five stars</a>
  <a href="#bottom" onclick="toggle(4);">Four stars</a>
  <a href="#bottom" onclick="toggle(3);">Three stars</a>
  <a href="#bottom" onclick="toggle(2);">Two stars</a>
  <a href="#bottom" onclick="toggle(1);">One star</a>
</div>
<div id="lorem">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel facilisis sapien, ut viverra risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin bibendum lobortis enim, id volutpat arcu scelerisque et. Fusce sed rhoncus arcu. Fusce nec nisi et nisl suscipit facilisis ac ac lacus. Donec sit amet metus in nunc ornare scelerisque ut non nisl. Curabitur quam ligula, cursus sit amet diam a, convallis varius turpis.

Pellentesque sit amet luctus metus. In faucibus sollicitudin elit ac bibendum. Nullam ut efficitur purus. Nullam neque lectus, scelerisque accumsan urna at, tincidunt accumsan mauris. Cras id libero at nunc bibendum molestie in id ipsum. Aliquam et tortor leo. Nunc laoreet ante neque, et ornare magna bibendum nec. Aliquam pharetra, tortor in pretium dapibus, dui lacus vulputate sapien, ac imperdiet turpis elit nec velit. Mauris tristique nibh eget magna ornare scelerisque. Mauris in neque consectetur, laoreet tellus vel, porttitor neque. Fusce lacinia bibendum magna, ac vehicula lectus pretium vel.

Phasellus diam felis, ultricies vitae pellentesque quis, volutpat ac lacus. Etiam sagittis tincidunt dui at eleifend. Donec nec tincidunt lorem, non aliquam nulla. Morbi sollicitudin odio velit, id cursus tortor vestibulum quis. Etiam pulvinar turpis ut sapien sodales, et consequat tellus rhoncus. Morbi fermentum mollis elit, vitae vehicula urna euismod et. Cras pretium aliquam nisl non facilisis. Nullam eget sollicitudin elit, sed condimentum magna. Duis semper ex quis leo venenatis imperdiet. Nunc eros mi, lacinia et luctus at, suscipit sed massa. Vestibulum ac libero ut magna commodo commodo a eu mauris. Vivamus quis nibh sit amet nunc condimentum dapibus. Sed id odio at sem sodales ullamcorper. In neque nisl, iaculis ut posuere nec, rhoncus in risus. Integer ac nibh urna. Suspendisse sit amet lorem vulputate, ultricies lacus non, elementum metus.

Nunc pretium et odio at volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse rutrum sodales placerat. Phasellus quis erat eu ipsum ultricies placerat sit amet sit amet risus. Aenean suscipit dolor in ligula tristique suscipit. Fusce sed gravida odio. Mauris pellentesque efficitur urna, eu pretium ipsum. Curabitur viverra purus non massa vehicula volutpat.

Cras eu nisl ut nulla aliquet pretium. Cras mollis lorem eros, euismod tincidunt enim sagittis at. Nulla in enim condimentum, dignissim ante eget, posuere sem. Fusce mattis rhoncus ex, nec dapibus ante facilisis et. Duis ac urna arcu. Suspendisse pulvinar sit amet leo et efficitur. Cras rhoncus elit sed erat vehicula, vitae auctor nibh fermentum. Fusce at lorem vestibulum, semper libero nec, lobortis nisi. Donec a lectus orci. Morbi et magna at magna suscipit facilisis. Quisque ultricies a felis quis pretium. Nulla nisi enim, sagittis sed eros quis, finibus mollis eros. Nunc eleifend, velit at facilisis feugiat, ligula nisl lacinia turpis, eu hendrerit arcu neque vitae mi. Sed finibus metus sagittis auctor molestie. Suspendisse blandit vehicula lorem, in vulputate sem rutrum non. In id elit ligula. 
</div>
<a name="bottom" />
<div id="bottom">
  <div class="box stars-5 hidden">
    5 stars
  </div>
  <div class="box stars-4 hidden">
    4 stars
  </div>
  <div class="box stars-3 hidden">
    3 stars
  </div>
  <div class="box stars-2 hidden">
    2 stars
  </div>
  <div class="box stars-1 hidden">
    1 star
  </div>
</div>

​