如何在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>