Html <；a>；元素样式按钮正在向下滚动我的网页

我一直在尝试强制我的按钮不向下/向上滚动到链接元素，只生成按钮的动画，但没有成功

我尝试了jquery的preventDefault（以及其他许多东西），但这并不能让动画真正工作

这是密码

html，
身体{
身高：120%；
背景颜色：灰色；
}
a{
文字装饰：无；
}
答：：-moz焦点内部{
边界：0；
}
/*按钮样式；按钮输入用于特殊输入*/
.按钮{
上边距：1rem；
}
.按钮输入{
宽度：140px；
}
.男>男{
右：30%；
位置：绝对位置；
显示：块；
宽度：80px；
高度：80px；
}
.女性>跨度{
左：30%；
位置：绝对位置；
显示：块；
宽度：80px；
高度：80px；
}
.bg{
边界半径：50%；
背景色：rgba（255、255、255、0.2）；
盒影：0 2px 3px rgba（0,0,0,0.1）；
过渡：所有0.2s线性；
}
.bg2{
边界半径：50%；
背景色：rgba（255、255、255、0.2）；
盒影：0 2px 3px rgba（0,0,0,0.1）；
过渡：所有0.2s线性；
}
.icon：：之前，
.图标：：之后{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
显示：块；
保证金：自动；
边界半径：2px；
内容：“；
}
.male.icon:：之后{
背景重复：无重复；
背景图片：url（“../images/man.png”）；
背景位置：中心；
}
.female.icon:：after{
背景重复：无重复；
背景图片：url（“../images/woman.png”）；
背景位置：中心；
}
.bg：：之后{
位置：绝对位置；
顶部：-4.75雷姆；
左：-4.75雷姆；
显示：块；
宽度：15雷姆；
高度：15雷姆；
边框：4px实心#fff；
边界半径：50%；
框大小：边框框；
内容：“；
变换：比例（0.4）；
不透明度：0；
}
.按钮：悬停.bg{
背景色：rgba（255、255、255、0.3）
}
.bg:目标{
动画：推出1s轻松；
过渡：所有1s线性；
}
#男：目标{
背景色：#003D79；
}
#女：目标{
背景色：#003D79；
}
.bg:target:：之前，
.bg:target:：after{
动画：wave 1s缓进缓出；
}
.bg:target:：before{
动画延迟：0.2s；
}
.bg:target:：after{
动画延迟：0.3s；
}
.bg2:：之后{
位置：绝对位置；
顶部：-4.75雷姆；
左：-4.75雷姆；
显示：块；
宽度：15雷姆；
高度：15雷姆；
边框：4px实心#fff；
边界半径：50%；
框大小：边框框；
内容：“；
变换：比例（0.4）；
不透明度：0；
}
.按钮：悬停.bg2{
背景色：rgba（255、255、255、0.3）
}
.bg2：目标{
动画：推出1s轻松；
过渡：所有1s线性；
}
.bg2:目标：：之前，
.bg2:目标：：之后{
动画：波浪1缓进缓出；
}
.bg2:目标：：之前{
动画延迟：0.2s；
}
.bg2:目标：：之后{
动画延迟：0.3s；
}
@关键帧推送{
15% {
变换：比例（0.75）；
长方体阴影：0 1px rgba（0,0,0,0.3）
}
75% {
转换：比例（1.1）；
长方体阴影：0 2px 5px rgba（0,0,0,0.1）
}
100% {
变换：缩放（1）
}
}
@关键帧波浪{
10% {
不透明度：0.3
}
100% {
变换：比例（1）；
不透明度：0
}
从{
背景色：#2EB4FF；
}
}
@为波浪设置关键帧{
10% {
不透明度：0.3
}
100% {
变换：比例（1）；
不透明度：0
}
从{
背景色：#FF99CC；
}
}
/*埃斯帕西奥斯帕拉特德拉奥普西翁·盖内罗斯*/
表。表。性别{
垫面：1%；
垫底：8%；
}

参与者的性别

我有时会通过添加一个不可见的div来解决这个问题，它位于真实目标的上方。。。然后目标

---

此滚动行为被烘焙到

：target

伪选择器中，因为浏览器的默认设置是将目标

id

滚动到窗口顶部

使用

jQuery

的

toggleClass

方法将是一个非常简单的解决方案。但是，如果您想使用纯

CSS

，有两种变通方法。一种是放置一个绝对定位的元素，并为目标元素添加

id

第二个选项是使用，在这里，您将为隐藏的复选框使用样式化标签

希望这有帮助

html，
身体{
身高：100%；
背景颜色：灰色；
}
a{
文字装饰：无；
}
答：：-moz焦点内部{
边界：0；
}
桌子{
保证金：0自动；
}
/*按钮样式；按钮输入用于特殊输入*/
.按钮{
页边顶部：1rem；
}
.按钮输入{
宽度：140px；
}
.男>男{
右：30%；
位置：绝对位置；
显示：块；
宽度：80px；
高度：80px；
}
.图标{
左：30%；
位置：绝对位置；
显示：块；
宽度：80px；
高度：80px；
}
.icon：：之前，
.图标：：之后{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
显示：块；
保证金：自动；
边界半径：2px；
内容：“；
}
.male.icon:：之后{
背景重复：无重复；
背景图片：url（“../images/man.png”）；
背景位置：中心；
}
.female.icon:：after{
背景重复：无重复；
背景图片：url（“../images/woman.png”）；
背景位置：中心；
}
.bg：：之后{
位置：绝对位置；
顶部：-4.75雷姆；
左：-4.75雷姆；
显示：块；
宽度：15雷姆；
高度：15雷姆；
边框：4px实心#fff；
边界半径：50%；
框大小：边框框；
内容：“；
变换：比例（0.4）；
不透明度：0；
}
.按钮：悬停.bg{
背景色：rgba（255、255、255、0.3）
}
.bg2:：之后{
位置：绝对位置；
顶部：-4.75雷姆；
左：-4.75雷姆；
显示：块；
宽度：15雷姆；
高度：15雷姆；
边框：4px实心#fff；
边界半径：50%；
框大小：边框框；
内容：“；
变换：比例（0.4）；
不透明度：0；
}
.按钮：悬停.bg2{
背景色：rgba（255、255、255、0.3）
}
@关键帧推送{
15% {
变换：比例（0.75）；
长方体阴影：0 1px rgba（0,0,0,0.3）
}
75% {
转换：比例（1.1）；
长方体阴影：0 2px 5px rgba（0,0,0,0.1）
}
100% {
转变
<div id="BUBU" style="position: absolute; margin-top: -100px; display: none;"></div>

<a href="#BUBU"> ... </a>
<span class="REAL-TARGET"></span>