javascript: onclick=“scrollWin()” doesn't work as intended
Question
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.
1 answers
solution1
0 ACCPTED 2021-01-20 21:11:29
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript arrow function doesn't work as intended?
javascript .onclick doesn't work
Child div onclick event: onclick on dynamically added children divs doesn't work as intended
Javascript 2D array generation doesn't work as intended
Javascript button onclick doesn't work
JavaScript onclick function with redirect doesn't work
Popup onclick Javascript doesn't work
onclick/Button Doesn't work in Javascript/HTML
random number javascript onclick doesn't work
javascript onclick function doesn't work with parameter
Related Tags