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

时间：2018-04-12 18:12:17

标签： html css css3 button

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>

2 个答案:

答案 0 :(得分：2)

这种滚动行为被烘焙到:target伪选择器中，因为浏览器的默认设置是将目标id滚动到窗口顶部。

使用jQuery的{​​{1}}方法将是一个非常简单的解决方案。但是，如果您想使用纯toggleClass，则有几种解决方法。一种方法是放置一个绝对定位的元素，并为您要定位的元素添加CSS。

第二个选项是使用checkbox hack，您可以使用样式标签代替隐藏的复选框。

希望这有帮助！

id
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;
}

修改

这是jQuery的一个例子：

<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>
$(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%;
}

答案 1 :(得分：1)

我有时会通过在真实目标中添加一个不可见的div，鞋面来固定它...然后将<a>定位到该invis div：

像这样：

<div id="BUBU" style="position: absolute; margin-top: -100px; display: none;"></div>

<a href="#BUBU"> ... </a>
<span class="REAL-TARGET"></span>
相关问题
最新问题