Pełna wersja: [HTML][PHP]Przyciski przewijające strone
Witam, chciałbym zrobić po prawej stronie, lub też w menu z prawej strony zrobić przyciski przewijające stronę. Niestety nie wiem jak to zrobić. Byłbym wdzięczny za pomoc w rozwiązaniu tego problemu. Dziękuję i pozdrawiam.
Jakaś wizualizacja tego? Bo "przycisk przewijający stronę" to dużo tego może być.
nie jestem pewien czy dokładnie o to chodzi 
ewentualnie na tym przykładzie sobie go dostosujesz pod siebie
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
ewentualnie na tym przykładzie sobie go dostosujesz pod siebie https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
Dobra, udało mi się, co prawda w javascripcie, ale działa.
Jedynie jakby ktoś mógł podpowiedzieć co zrobić, żeby ustawić przesuwanie na smooth to byłbym w siódmym niebie.
Może się kiedyś komuś przyda.
<!DOCTYPE html>
<html>
<head>
<title>Like</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: 1;
position: fixed;
bottom: 65px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
#myBtn2 {
display: 1;
position: fixed;
bottom: 10px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn2:hover {
background-color: #555;
}
#myBtn3 {
display: 1;
position: fixed;
bottom: 10px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn3:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go up">UP</button>
<button onclick="botFunction()" id="myBtn2" title="Go down">DOWN</button>
<ol>
<?php for($i=0;$i<500;$i++){ ?>
<li><p><?php echo $i ?></p></li>
<?php } ?>
</ol>
<script>
var mybutton = getElementById("myBtn");
var mybutton2 = getElementById("myBtn2");
function topFunction() {
document.body.scrollTop -= 200;
document.documentElement.scrollTop -= 200;
}
function botFunction() {
document.body.scrollTop += 200;
document.documentElement.scrollTop += 200;
}
</script>
</body>
</html>
Jedynie jakby ktoś mógł podpowiedzieć co zrobić, żeby ustawić przesuwanie na smooth to byłbym w siódmym niebie.
Może się kiedyś komuś przyda.
<!DOCTYPE html>
<html>
<head>
<title>Like</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: 1;
position: fixed;
bottom: 65px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
#myBtn2 {
display: 1;
position: fixed;
bottom: 10px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn2:hover {
background-color: #555;
}
#myBtn3 {
display: 1;
position: fixed;
bottom: 10px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn3:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go up">UP</button>
<button onclick="botFunction()" id="myBtn2" title="Go down">DOWN</button>
<ol>
<?php for($i=0;$i<500;$i++){ ?>
<li><p><?php echo $i ?></p></li>
<?php } ?>
</ol>
<script>
var mybutton = getElementById("myBtn");
var mybutton2 = getElementById("myBtn2");
function topFunction() {
document.body.scrollTop -= 200;
document.documentElement.scrollTop -= 200;
}
function botFunction() {
document.body.scrollTop += 200;
document.documentElement.scrollTop += 200;
}
</script>
</body>
</html>
Takie zwykle "skoki" to najprosciej przez zwykłą kotwice w htmlu
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.