Her Box in altına en tepeye çıkması için bir link nasıl yapabilirim?

17-04-2020, 02:37:06

Örnek olarak 5. kutuya gittik yukarı çıkmak için box yazısının altına bir link koyup en üste çıkmak istiyorum bu yapılabilirmi?

<!DOCTYPE html>
<html>
<head>
    <title>sayfa içinde hareket</title>
    <link href="css/sayfaici.css" rel="stylesheet">
</head>
<body>

    <ul>
        <li><a href="#box1">Box 1</a></li>
        <li><a href="#box2">Box 2</a></li>
        <li><a href="#box3">Box 3</a></li>
        <li><a href="#box4">Box 4</a></li>
        <li><a href="#box5">Box 5</a></li>
        <li><a href="#box6">Box 6</a></li>        
    </ul>
    <div id="box1" class="box">Box 1</div>
    <div id="box2" class="box">Box 2</div>
    <div id="box3" class="box">Box 3</div>
    <div id="box4" class="box">Box 4</div>
    <div id="box5" class="box">Box 5</div>
    <div id="box6" class="box">Box 6</div>
</body>
</html>

#box1{
    border: solid 10px;
    border-color: black;
    background-color: orange;
    width: 1000px;
    height: 500px;
    font-size: 45px;
}

#box2{
    border: solid 10px;
    border-color: black;
    background-color: green;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;

}

#box3{
    border: solid 10px;
    border-color: black;
    background-color: grey;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

#box4{
    border: solid 10px;
    border-color: black;
    background-color: blue;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

#box5{
    border: solid 10px;
    border-color: black;
    background-color: pink;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

#box6{
    border: solid 10px;
    border-color: black;
    background-color: yellow;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

17-04-2020, 03:21:00

mehmetulus03

destroey adlı üyeden alıntı: mesajı görüntüle

Örnek olarak 5. kutuya gittik yukarı çıkmak için box yazısının altına bir link koyup en üste çıkmak istiyorum bu yapılabilirmi?

<!DOCTYPE html>
<html>
<head>
    <title>sayfa içinde hareket</title>
    <link href="css/sayfaici.css" rel="stylesheet">
</head>
<body>

    <ul id="ust">
        <li><a href="#box1">Box 1</a></li>
        <li><a href="#box2">Box 2</a></li>
        <li><a href="#box3">Box 3</a></li>
        <li><a href="#box4">Box 4</a></li>
        <li><a href="#box5">Box 5</a></li>
        <li><a href="#box6">Box 6</a></li>        
    </ul>
    <div id="box1" class="box">Box 1</div>
    <div id="box2" class="box">Box 2</div>
    <div id="box3" class="box">Box 3</div>
    <div id="box4" class="box">Box 4</div>
    <div id="box5" class="box">Box 5 <a href="#ust">Üste Çık</a></div>
    <div id="box6" class="box">Box 6</div>
</body>
</html>

#box1{
    border: solid 10px;
    border-color: black;
    background-color: orange;
    width: 1000px;
    height: 500px;
    font-size: 45px;
}

#box2{
    border: solid 10px;
    border-color: black;
    background-color: green;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;

}

#box3{
    border: solid 10px;
    border-color: black;
    background-color: grey;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

#box4{
    border: solid 10px;
    border-color: black;
    background-color: blue;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

#box5{
    border: solid 10px;
    border-color: black;
    background-color: pink;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

#box6{
    border: solid 10px;
    border-color: black;
    background-color: yellow;
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    font-size: 45px;    
}

Bu şekilde yapabilirsiniz.

17-04-2020, 03:29:50

#3

destroey

evet çok teşekkür ederim aradıgım şey buydu..