I have the following simple page:
- a header with a name on the top left that disappears when you scroll down (you see the menu on the bottom right instead)
- a fixed background picture (parallax)
- and a menu at the bottom right corner which shows up when scrolling down (because of the parallax)
Apart from scrolling with the mouse, I want that when you click on the name on top, the page should automatically scroll down to the bottom of the page and show the menu. The problem is that with my onclick=”scrollWin()” function the page scrolls down for a millisecond and the menu appears but then the page scrolls back up a little by itself and the menu disappears again while it should stay there when the page has been scrolled to the bottom. I think the problem might be in the parallax effect. Could you help me, please?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<style>
body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
}
.container {
height: 10vh;
background-color: white;
}
.container1 {
height: 10vh;
background-color: white;
}
.textabout {
position: relative;
top: 200px;
left: 900px;
text-align: center;
opacity: 0.5;
text-align: justify;
text-justify: inter-word;
/* scroll-snap-align: start;*/
}
.parallax {
/* The image used */
background-image: url("IMG_7916_cut.jpg");
opacity: 0.8;
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 567px 756px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* On screens that are 992px wide or less */
@media screen and (max-width: 600px) {
.header {
position: relative;
text-align: left;
display: block;
margin-left: 80.5px;
margin-right: auto;
}
ul {
margin-right: 17px;
}
.parallax {
background-size: 85%;
}
}
</style>
</head>
<body>
<div class="container1">
<div class="header">
<a href="" onclick="scrollWin()">|bacheva</a>
</div>
</div>
<div class="parallax"></div>
<div class="container">
<ul style="font-size:22px;">
<li><a href="about_final.html">|about</a></li>
<li><a href="project%20page_final.html">|work</a></li>
<li><a href="home_final.html">|home</a></li>
</ul>
</div>
<script>
function scrollWin() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</body>
</html>
Thank you in advance for your help.
Advertisement
Answer
yes, you can change it to be a div (notice i gave the div class="btn" and on the css i added cursor: pointer
you can see working example here:
https://codepen.io/Elnatan/pen/JjRvpaJ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<style>
body,
html {
height: 100%;
margin: 0;
font-family: 'Karla';
font-size: 22px;
}
* {
box-sizing: border-box;
}
.header {
margin-left: 190px;
margin-top: 40px;
text-align: left;
opacity: 0.4;
}
.container {
height: 10vh;
background-color: white;
}
.container1 {
height: 10vh;
background-color: white;
}
.btn{
cursor:pointer;
}
.textabout {
position: relative;
top: 200px;
left: 900px;
text-align: center;
opacity: 0.5;
text-align: justify;
text-justify: inter-word;
/* scroll-snap-align: start;*/
}
.parallax {
/* The image used */
background-image: url("IMG_7916_cut.jpg");
opacity: 0.8;
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 567px 756px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
height: 10vh;
margin-right: 30px;
margin-bottom: 30px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
opacity: 0.4;
padding: 16px 16px;
margin-left: 30px;
margin-right: 30px;
transition: 0.2s;
}
li a:hover,
li a:focus {
color: black;
opacity: 1;
}
/* On screens that are 992px wide or less */
@media screen and (max-width: 600px) {
.header {
position: relative;
text-align: left;
display: block;
margin-left: 80.5px;
margin-right: auto;
}
ul {
margin-right: 17px;
}
.parallax {
background-size: 85%;
}
}
</style>
</head>
<body>
<div class="container1">
<div class="header">
<div class="btn" onclick="scrollWin()">|bacheva</div>
</div>
</div>
<div class="parallax"></div>
<div class="container">
<ul style="font-size:22px;">
<li><a href="about_final.html">|about</a></li>
<li><a href="project%20page_final.html">|work</a></li>
<li><a href="home_final.html">|home</a></li>
</ul>
</div>
<script>
function scrollWin() {
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</body>
</html>