Кнопка вверх-вниз

Кнопка-ссылка HTML

Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html) может быть создана с помощью ссылок «якорей». Обычный «якорь» имеет следующий вид:

Такой «якорь» невидим и может быть поставлен в любом месте, в котором вы считаете нужным.

Для того чтобы перейти к «якорю», используется следующая команда:

<a href=”#имя якоря”>название кнопки</a>

Нажатие на название кнопки, моментально переводит курсор к «якорю».

Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:

<!DOCTYPE html>
<html>
<head>
    <title>Якорь</title>
</head>
<body> 
<form>
<a name="top"></a>
<p><a href="#end">вниз</a></p>
…
<p><a href="#top">вверх</a></p>
…
<a name="end"></a>
</form>
</body>
</html>

Как сделано у меня:

    <head>

    <!-- Кнопка вверх-вниз -->
    <style>
    .topNubex {
        position: fixed;
        right: 5px;
        bottom: 130px;
    }
    .bottomNubex {
        position: fixed;
        right: 5px;
        top: 95px;
    }
    </style>

    </head>

    <body>

    <!-- Кнопка вниз -->
    <a href="#end" class="bottomNubex">Вниз</a>

                                .......
    <!-- Кнопка вверх -->
    <a href="#" title="Вернуться к началу страницы" class="topNubex">Вверх</a>

    </body>

    <!-- Якорь вниз -->
    <a name="end"></a>