Question

我正在尝试使锚元素居中，该锚元素会在页面向下100px时出现一个弹出窗口，并使您返回页面顶部。但是每当我尝试将其居中或在CSS中删除其底部和右侧填充标签时，当我滚动超过100px时都不会出现

$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
    $('#back2Top').fadeIn();
} else {
    $('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
    event.preventDefault();
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
});

});

#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 99;
display: none;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 0;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 30px;
text-decoration: none;
border-radius: 50%;
padding-bottom: 3px;
}

#back2Top:hover {
background-color: #ddd;
color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>sample</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="back2Top" title="Back to top" href="#">&#10148;</a>
</body>

Answer 1

首先，您需要jquery来做到这一点。

其次，您的CSS都是错误的。这是一个有效的代码段：

https://codepen.io/anon/pen/rrQrRB

ViewModel

$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('#back2Top').fadeIn();
        } else {
            $('#back2Top').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});

#back2Top{
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    position:fixed;
    bottom: 30px;
    left: -webkit-calc(50% - 23px);
    left: calc(50% - 23px);
    right: -webkit-calc(50% - 23px);
    right: calc(50% - 23px);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    background-color: #333;
    color: #ddd;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    border-radius: 50%;
    display:none;
    padding: 3px;
}
#back2Top:hover{
    text-decoration:none;
}

Answer 2

我不清楚您的情况。如果要居中a。您可以给right一个50%，使其停留在中心。

$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
    $('#back2Top').fadeIn();
} else {
    $('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
    event.preventDefault();
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
});

});

#back2Top {
width: 40px;
line-height: 40px;
z-index: 99;
display: none;
cursor: pointer;
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: calc(50% - 15px);
left: calc(50% - 15px);
background-color: #333;
color: #ddd;
text-align: center;
font-size: 30px;
text-decoration: none;
border-radius: 50%;

}

body{
  height:1200px
}

#back2Top:hover {
background-color: #ddd;
color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>sample</h1>
<a id="back2Top" title="Back to top" href="#">&#10148;</a>
</body>

Answer 3

您可以使用

将块本身居中

left: 50%;
position: fixed;
transform: translateX(-50%);

并使用flexbox将箭头居中对齐：

display: flex;
align-items: center;
justify-content: center;

$(window).scroll(function() {
  var height = $(window).scrollTop();
  if (height > 100) {
    $('#back2Top').fadeIn().css('display', 'flex');
  } else {
    $('#back2Top').fadeOut();
  }
});
$(document).ready(function() {
  $("#back2Top").click(function(event) {
    event.preventDefault();
    $("html, body").animate({
      scrollTop: 0
    }, "slow");
    return false;
  });

});

h1 {
height: 1000px;
}

#back2Top {
  width: 40px;
  line-height: 40px;
  z-index: 99;
  cursor: pointer;
  -moz-transform: translateX(-50%) rotate(270deg);
  -webkit-transform: translateX(-50%) rotate(270deg);
  -o-transform: translateX(-50%) rotate(270deg);
  -ms-transform: translateX(-50%) rotate(270deg);
  transform: translateX(-50%) rotate(270deg);
  left: 50%;
  position: fixed;
  bottom: 50px;
  background-color: #333;
  color: #ddd;
  text-align: center;
  font-size: 30px;
  text-decoration: none;
  border-radius: 50%;
  padding: 5px;
  display: none;
  align-items: center;
  justify-content: center;
}

#back2Top:hover {
  background-color: #ddd;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>sample</h1>
  <a id="back2Top" title="Back to top" href="#">&#10148;</a>
</body>

需要帮助，将滚动条居中到页面顶部锚链接

3 个答案: