<a> element styled button is scrolling down my web page - html

Question

I've been trying to force my button to not scroll down/up to the linked element and just produce the button's animation without any success!
I've tried the jquery's preventDefault(among many other things) but this would not let the animation to actually work
Here is the code
Code in codepen
html,
body {
height: 120%;
background-color: gray;
}
a {
text-decoration: none;
}
a::-moz-focus-inner {
border: 0;
}
/*Buttons style; button_input is for the sepcial inputs*/
.button {
top-margin: 1rem;
}
.button_input {
width: 140px;
}
.male>span {
right: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.female>span {
left: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.bg {
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
}
.bg2 {
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
}
.icon::before,
.icon::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
margin: auto;
border-radius: 2px;
content: "";
}
.male .icon::after {
background-repeat: no-repeat;
background-image: url("../images/man.png");
background-position: center;
}
.female .icon::after {
background-repeat: no-repeat;
background-image: url("../images/woman.png");
background-position: center;
}
.bg::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg {
background-color: rgba(255, 255, 255, 0.3)
}
.bg:target {
animation: push 1s ease-out;
transition: all 1s linear;
}
#male:target {
background-color: #003D79;
}
#female:target {
background-color: #003D79;
}
.bg:target::before,
.bg:target::after {
animation: wave 1s ease-in-out;
}
.bg:target::before {
animation-delay: 0.2s;
}
.bg:target::after {
animation-delay: 0.3s;
}
.bg2::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg2 {
background-color: rgba(255, 255, 255, 0.3)
}
.bg2:target {
animation: push 1s ease-out;
transition: all 1s linear;
}
.bg2:target::before,
.bg2:target::after {
animation: waves 1s ease-in-out;
}
.bg2:target::before {
animation-delay: 0.2s;
}
.bg2:target::after {
animation-delay: 0.3s;
}
#keyframes push {
15% {
transform: scale(0.75);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3)
}
75% {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
}
100% {
transform: scale(1)
}
}
#keyframes wave {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #2EB4FF;
}
}
#keyframes waves {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #FF99CC;
}
}
/*Espacios para el td de la opción géneros */
table.table td.genders {
padding-top: 1%;
padding-bottom: 8%;
}
<table>
<tr>
<td align='center' colspan='3'>
<h5 class='StepTitle'>Partaker's Gender</h5>
</td>
</tr>
<tr>
<td align='center' class="genders">
<a class="button male" href="#male">
<span class="bg" id="male"></span>
<span class="symbol"></span>
</a>
<a class="button female" href="#female">
<span class="bg2" id="female"></span>
<span class="icon"></span>
</a>
</td>
</tr>
</table>

Answer 1

This scrolling behavior is baked into the :target pseudo selector, since the browser's default is to scroll the targeted id to the top of the window.
Using jQuery's toggleClass method would be a pretty simple solution. However, if you want to use pure CSS there are a couple workarounds. One is to place an absolutely positioned element and add the id for the element you're targeting to it.
A second option is to use the checkbox hack, where you use styled labels for a hidden checkbox instead.
Hope this helps!
html,
body {
height: 100%;
background-color: gray;
}
a {
text-decoration: none;
}
a::-moz-focus-inner {
border: 0;
}
table {
margin: 0 auto;
}
/*Buttons style; button_input is for the sepcial inputs*/
.button {
margin-top: 1rem;
}
.button_input {
width: 140px;
}
.male>span {
right: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.icon {
left: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.icon::before,
.icon::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
margin: auto;
border-radius: 2px;
content: "";
}
.male .icon::after {
background-repeat: no-repeat;
background-image: url("../images/man.png");
background-position: center;
}
.female .icon::after {
background-repeat: no-repeat;
background-image: url("../images/woman.png");
background-position: center;
}
.bg::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg {
background-color: rgba(255, 255, 255, 0.3)
}
.bg2::after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.button:hover .bg2 {
background-color: rgba(255, 255, 255, 0.3)
}
#keyframes push {
15% {
transform: scale(0.75);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3)
}
75% {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
}
100% {
transform: scale(1)
}
}
#keyframes wave {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #2EB4FF;
}
}
#keyframes waves {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #FF99CC;
}
}
/*Espacios para el td de la opción géneros */
table.table td.genders {
padding-top: 1%;
padding-bottom: 8%;
}
//checkbox hack
#toggle-male,
#toggle-female {
opacity: 0;
}
input[type=checkbox] {
opacity: 0;
}
label {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
cursor: pointer;
}
/* toggled state */
/* male animation */
#toggle-male:checked~.bg {
animation: push 1s ease-out;
transition: all 1s linear;
background-color: #003D79;
}
#toggle-male:checked~.bg::before,
#toggle-male:checked~.bg::after {
animation: waves 1s ease-in-out;
}
#toggle-male:checked~.bg::before {
animation-delay: 0.2s;
}
#toggle-male:checked~.bg1::after {
animation-delay: 0.3s;
}
/* female animations */
#toggle-female:checked~.bg2 {
animation: push 1s ease-out;
transition: all 1s linear;
background-color: #003D79;
}
#toggle-female:checked~.bg2::before,
#toggle-female:checked~.bg2::after {
animation: waves 1s ease-in-out;
}
#toggle-female:checked~.bg2::before {
animation-delay: 0.2s;
}
#toggle-female:checked~.bg2::after {
animation-delay: 0.3s;
}
<table>
<tr>
<td align='center' colspan='3'>
<h5 class='StepTitle'>Partaker's Gender</h5>
</td>
</tr>
<tr>
<td align='center' width="100px" class="genders">
<a class="button male" id="male">
<input type="checkbox" id="toggle-male">
<label for="toggle-male" class="bg"></label>
</a>
</td>
<td align='center' width="100px" class="genders">
<a class="button female" id="female">
<input type="checkbox" id="toggle-female">
<label for="toggle-female" class="bg2"></label>
</a>
</td>
</tr>
</table>
Edit:
Here's an example with jQuery:
$(document).ready(function() {
$('.bgs').on('click', function() {
$(this).toggleClass('animate background').toggleClass('animateAft');
if ($('.bgs').hasClass('animate background' || 'animateAft')) {
$('.bgs').not(this).removeClass('animate background').removeClass('animateAft');
}
})
});
html,
body {
height: 100%;
background-color: gray;
}
a {
text-decoration: none;
}
a::-moz-focus-inner {
border: 0;
}
table {
margin: 0 auto;
}
.button {
margin-top: 1rem;
}
.button_input {
width: 140px;
}
.icon {
left: 30%;
position: absolute;
display: block;
width: 80px;
height: 80px;
}
.icon::before,
.icon::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
margin: auto;
border-radius: 2px;
content: "";
}
.male .icon::after {
background-repeat: no-repeat;
background-image: url("../images/man.png");
background-position: center;
}
.female .icon::after {
background-repeat: no-repeat;
background-image: url("../images/woman.png");
background-position: center;a
}
.bgs {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s linear;
cursor: pointer;
}
.bg:after,
.bg2:after {
position: absolute;
top: -4.75rem;
left: -4.75rem;
display: block;
width: 15rem;
height: 15rem;
border: 4px solid #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
transform: scale(0.4);
opacity: 0;
}
.animate {
animation: push 1s ease-out;
}
.background {
transition: background .4s ease;
background-color: #003D79;
}
.bg.animateAft:after,
.bg2.animateAft:after {
animation: waves 1s ease-in-out;
}
.bg.animateAft:before,
bg2.animateAft:before {
animation-delay: 0.2s;
}
.bg.animateAft:after,
.bg2.animateAft:after {
animation-delay: 0.3s;
}
#keyframes push {
15% {
transform: scale(0.75);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3)
}
75% {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)
}
100% {
transform: scale(1)
}
}
#keyframes wave {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #2EB4FF;
}
}
#keyframes waves {
10% {
opacity: 0.3
}
100% {
transform: scale(1);
opacity: 0
}
from {
background-color: #FF99CC;
}
}
/*Espacios para el td de la opción géneros */
table.table td.genders {
padding-top: 1%;
padding-bottom: 8%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td align='center' colspan='3'>
<h5 class='StepTitle'>Partaker's Gender</h5>
</td>
</tr>
<tr>
<td align='center' width="100px" class="genders">
<a class="button male" id="male">
<span id="toggle-male" class="bgs bg"></span>
</a>
</td>
<td align='center' width="100px" class="genders">
<a class="button female" id="female">
<span id="toggle-female" class="bgs bg2"></span>
</a>
</td>
</tr>
</table>

Answer 2

I sometimes fix this, by adding an invisible div, upper from your real target... and then target <a> to that invis div:
Like this:
<div id="BUBU" style="position: absolute; margin-top: -100px; display: none;"></div>
...
<span class="REAL-TARGET"></span>