I am currently working on a website and I would like to make a button that scrolls the page to the bottom. Currently I have tried this with using href to refer to the bottom of the page because a friend recommended it. But, it didn't work. Is there any easy way to do this. My current code <a href"#bottom"><img link></a>

I deleted the image link from the code because it was too long.

CodePudding user response：

Your code should work. For the href"#bottom", you should add an equal sign like so: href="#bottom"

CodePudding user response：

<!--kaydırma çubuğu(scroll bar) degerinin 'visible' olması ile hiç kaydırma çubuğu(scroll bar) değeri vermemeniz aynı şeyi ifade eder-->
<div id="scrollVisibleDefault"
     style="overflow: visible; width: 100px; height:100px; border-style:solid; border-width:2px;">
    visible - scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
</div>

<br>
<br>
<br>
<br>
<br>

<!--kaydırma çubuğu(scroll bar) değerinin 'hidden' olması ile herhangi bir dışa taşma durumunda
kaydırma çubukları(scroll bars) olmayacak ve ilgili alanın boyutu kadar görünüm olacaktır-->
<div id="scrollHidden"
     style="overflow: hidden; width: 100px; height:100px; border-style:solid; border-width:2px;">
    hidden - scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
</div>

<br>
<br>

<!--kaydırma çubuğu(scroll) değerinin 'scroll' olması durumunda herhangi bir taşma olmasa dahi
yatay ve dikey kaydırma çubukları(scroll bars) ekranda görünecek ve taşma olma durumunda aktif olacaklardır-->
<div id="scrollScroll"
     style="overflow: scroll; width: 100px; height:100px; border-style:solid; border-width:2px;">
    scroll - scroll bar
</div>

<br>
<br>

<!--kaydırma çubuğu(scroll) değerinin 'auto' olması durumunda taşma olmadığı sürece
ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar-->
<div id="scrollAuto"
     style="overflow: auto; width: 100px; height:100px; border-style:solid; border-width:2px;">
    auto - scroll bar
</div>
<br>
<!--kaydırma çubuğu(scroll) değerinin 'auto' olması durumunda taşma olmadığı sürece
ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar-->
<div id="scrollAuto"
     style="overflow: auto; width: 100px; height:100px; border-style:solid; border-width:2px;">
    auto - scroll bar taşma olan yazı örneği yazilimcity.net
        kaydırma çubuğu(scroll) değerinin 'auto' olması durumunda taşma olmadığı sürece
        ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar 
</div>


<br>
<br>

<!--satır içi çerçeve (iframe) de zaten kaydırma çubuğu(scroll) özelliği varsayılan olarak mevcuttur.-->
<iframe id="yazilimCityNetIFrameId" src="http://yazilimcity.net/htmlcss-yataydikey-kaydirma-cubugu-kodu-kullanimi-ornegi-htmlcss-horizontalvertical-scroll-bar-code-usage-example/"
        style="width: 200px; height: 300px; border-style:solid; border-width:5px;">
    iframe default - scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
</iframe>