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>

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

1 个答案: