如何在div中放置返回顶部按钮

Question

我已经创建了按钮，用于页面中的返回顶部。它在滚动后出现，但现在它出现在右下角。 有没有一种方法可以将该按钮定位在div中并使其始终显示在同一个地方？

HTML和JS：

<div class="under-footer"> 
      <div class="container content"> 
       <div class="col-lg-6"> 
       <h1>Да, това е!</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, eros at eleifend volutpat, est urna sollicitudin felis, sed imperdiet nisi neque in nibh. Nunc ac nibh arcu. Etiam aliquam libero id enim accumsan, eu ultrices tellus tristique. Duis sed tellus sit amet neque gravida dapibus. Integer ac ultricies orci, non ullamcorper ligula. Nullam a risus ut augue tempor pulvinar nec nec eros. Donec turpis orci, fermentum a dui sit amet, ultricies faucibus nunc. Aliquam consectetur augue condimentum, congue justo at, rhoncus justo. Sed hendrerit commodo purus, a tempus sem. Etiam eget aliquam nisl. Quisque est nunc, sollicitudin at felis in, lobortis fermentum justo.</p> 
       </div> 
       <div class="col-lg-6"> 
       <h1>Не, това е Lorem Ipsum</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, eros at eleifend volutpat, est urna sollicitudin felis, sed imperdiet nisi neque in nibh. Nunc ac nibh arcu. Etiam aliquam libero id enim accumsan, eu ultrices tellus tristique. Duis sed tellus sit amet neque gravida dapibus. Integer ac ultricies orci, non ullamcorper ligula. Nullam a risus ut augue tempor pulvinar nec nec eros. Donec turpis orci, fermentum a dui sit amet, ultricies faucibus nunc. Aliquam consectetur augue condimentum, congue justo at, rhoncus justo. Sed hendrerit commodo purus, a tempus sem. Etiam eget aliquam nisl. Quisque est nunc, sollicitudin at felis in, lobortis fermentum justo.</p> 
       </div> 
      </div> 
      </div> 
</div> 

<script type="text/javascript"> 
// create the back to top button 
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>'); 

var amountScrolled = 1; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > amountScrolled) { 
     $('a.back-to-top').fadeIn('slow'); 
    } else { 
     $('a.back-to-top').fadeOut('slow'); 
    } 
}); 

$('a.back-to-top, a.simple-back-to-top').click(function() { 
    $('body').animate({ 
     scrollTop: 0 
    }, 'fast'); 
    return false; 
}); 
</script> 

CSS：

body{ 
    background-image: url("../img/bg.png"); 
    background-size: cover; 
    background-position: 100% 5%; 
    background-color: #01383b; 
} 

.wrap { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

.footer { 
    z-index: 5; 
    position: relative; 
    background-image: url("../img/cover.png"); 
    line-height: 2; 
    text-align: center; 
    color: #042E64; 
    font-size: 30px; 
    font-family: 'Open Sans'; 
    font-weight: bold; 
    text-shadow: 0 1px 0 #84BAFF; 
    box-shadow: 0 0 15px #00214B 
} 

.under-footer{ 
    position: absolute; 
    opacity: 0.9; 
    filter: alpha(opacity=40); 
    width: 100%; 
    height: auto; 
    color: white; 
} 

.content{ 
    padding-top: 95px; 
    background:#01383b; 
} 

#button1{ 
    margin-top: 15px; 
} 

#button2{ 
    margin-top: 15px; 
    margin-left: 95px; 
} 

a.back-to-top { 
    display: none; 
    width: 60px; 
    height: 60px; 
    text-indent: -9999px; 
    position: fixed; 
    z-index: 999; 
    right: 20px; 
    bottom: 20px; 
    background: url("../img/arrow.png") no-repeat center 43%; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
} 
a:hover.back-to-top { 
    background-color: #000; 
} 

我试图在右下角以定位<div class="container content">...</div>内的按钮。 目前它正在移动页面。

Answer 1

是，CSS和固定定位：

a.back-to-top, a.simple-back-to-top { 
    position : fixed; 
    bottom : 20px; 
    right : 20px; 
    } 

测试，并告诉我们。

Answer 2

你可以用固定位置来做到这一点，就像Marcos在他的回答中所建议的那样。或者，您可以使用jQuery提供更平滑的过渡，并淡入和淡出选项。请看下图：

$(function() { 
 
    var b = $('#back-top'); 
 
    b.hide(); 
 
    
 
    $(window).on('scroll', function() { 
 
     if ($(this).scrollTop() > 100) { 
 
      b.fadeIn(); 
 
     } else { 
 
      b.fadeOut(); 
 
     } 
 

 
    }); 
 
     
 
    b.on('click', function() { 
 
     $('html,body').animate({ 
 
      scrollTop: 0 
 
     }, 2000); 
 
     return false; 
 
    }); 
 
});

body { 
 
    background-image: url("../img/bg.png"); 
 
    background-size: cover; 
 
    background-position: 100% 5%; 
 
    background-color: #01383b; 
 
} 
 
.wrap { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.footer { 
 
    z-index: 5; 
 
    position: relative; 
 
    background-image: url("../img/cover.png"); 
 
    line-height: 2; 
 
    text-align: center; 
 
    color: #042E64; 
 
    font-size: 30px; 
 
    font-family:'Open Sans'; 
 
    font-weight: bold; 
 
    text-shadow: 0 1px 0 #84BAFF; 
 
    box-shadow: 0 0 15px #00214B 
 
} 
 
.under-footer { 
 
    position: absolute; 
 
    opacity: 0.9; 
 
    filter: alpha(opacity=40); 
 
    width: 100%; 
 
    height: auto; 
 
    color: white; 
 
} 
 
.content { 
 
    padding-top: 95px; 
 
    background:#01383b; 
 
} 
 
#button1 { 
 
    margin-top: 15px; 
 
} 
 
#button2 { 
 
    margin-top: 15px; 
 
    margin-left: 95px; 
 
} 
 
#back-top { 
 
    background-color: rgba(81,81,81,0.85); 
 
} 
 

 
#back-top a { 
 
    width: 60px; 
 
    height: 60px; 
 
    text-indent: -9999px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    right: 20px; 
 
    bottom: 20px; 
 
    background: rgba(241,241,241,0.85) url("../img/arrow.png") no-repeat center 43%; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
} 
 

 
#back-top a: hover { 
 
    background-color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="under-footer"> 
 
    <div class="container content"> 
 
     <div class="col-lg-6"> 
 
      <h1>Да, това е!</h1> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, eros at eleifend volutpat, est urna sollicitudin felis, sed imperdiet nisi neque in nibh. Nunc ac nibh arcu. Etiam aliquam libero id enim accumsan, eu ultrices tellus tristique. Duis sed tellus sit amet neque gravida dapibus. Integer ac ultricies orci, non ullamcorper ligula. Nullam a risus ut augue tempor pulvinar nec nec eros. Donec turpis orci, fermentum a dui sit amet, ultricies faucibus nunc. Aliquam consectetur augue condimentum, congue justo at, rhoncus justo. Sed hendrerit commodo purus, a tempus sem. Etiam eget aliquam nisl. Quisque est nunc, sollicitudin at felis in, lobortis fermentum justo.</p> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <h1>Не, това е Lorem Ipsum</h1> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, eros at eleifend volutpat, est urna sollicitudin felis, sed imperdiet nisi neque in nibh. Nunc ac nibh arcu. Etiam aliquam libero id enim accumsan, eu ultrices tellus tristique. Duis sed tellus sit amet neque gravida dapibus. Integer ac ultricies orci, non ullamcorper ligula. Nullam a risus ut augue tempor pulvinar nec nec eros. Donec turpis orci, fermentum a dui sit amet, ultricies faucibus nunc. Aliquam consectetur augue condimentum, congue justo at, rhoncus justo. Sed hendrerit commodo purus, a tempus sem. Etiam eget aliquam nisl. Quisque est nunc, sollicitudin at felis in, lobortis fermentum justo.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, eros at eleifend volutpat, est urna sollicitudin felis, sed imperdiet nisi neque in nibh. Nunc ac nibh arcu. Etiam aliquam libero id enim accumsan, eu ultrices tellus tristique. Duis sed tellus sit amet neque gravida dapibus. Integer ac ultricies orci, non ullamcorper ligula. Nullam a risus ut augue tempor pulvinar nec nec eros. Donec turpis orci, fermentum a dui sit amet, ultricies faucibus nunc. Aliquam consectetur augue condimentum, congue justo at, rhoncus justo. Sed hendrerit commodo purus, a tempus sem. Etiam eget aliquam nisl. Quisque est nunc, sollicitudin at felis in, lobortis fermentum justo.</p> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie, eros at eleifend volutpat, est urna sollicitudin felis, sed imperdiet nisi neque in nibh. Nunc ac nibh arcu. Etiam aliquam libero id enim accumsan, eu ultrices tellus tristique. Duis sed tellus sit amet neque gravida dapibus. Integer ac ultricies orci, non ullamcorper ligula. Nullam a risus ut augue tempor pulvinar nec nec eros. Donec turpis orci, fermentum a dui sit amet, ultricies faucibus nunc. Aliquam consectetur augue condimentum, congue justo at, rhoncus justo. Sed hendrerit commodo purus, a tempus sem. Etiam eget aliquam nisl. Quisque est nunc, sollicitudin at felis in, lobortis fermentum justo.</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div id="back-top"> 
 
    <a href="#top"><span></span>back to top</a> 
 
</div>