Question

我对Javascript，CSS和HTML的整个部分有点新鲜。

我正在尝试将div附加到父div的底部和中心。父div中有一个响应的背景图像。我的fa-arrow附在底部，在垂直方向上响应，不是水平的，也不是居中的。

任何善良的灵魂都可以解释如何解决这个问题，或者告诉我，如果我错了！

提前致谢。

这是我的代码：

HTML：

<div class="content-1">
  <div id="to-first">
   <i class="fa fa-angle-down"></i>
  </div>
</div>

CSS：

.content-1 {
  position: relative;
}

#to-first {
  position: absolute;
  margin-right: 50%;
  bottom: 10;
  color: #000;
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  display: none;
}

使用Javascript：

var main = function() {

$(document).ready(function() {
 $('#to-first').show(); 
});

$('#to-first').click(function() {
  $('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});    

};
$(document).ready(main);

这是一个jsfiddle：

https://jsfiddle.net/804jeg82/330/

Answer 1

将您的to-first置于绝对位置，位于内容的底部，并将其宽度设为100％;

给你的内容一个高度，否则它是空的，里面有一个绝对的元素。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-1">
  <div id="to-first">
	<i class="fa fa-angle-down"></i>
  </div>
</div>

-webkit-user-select: none;

将div附加到响应的父div

1 个答案: