鏈接到頁面底部的錨點將點擊到頁面頂部

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存有表明該網頁實際上是在做向下滾動，因爲它應該

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>