how to position back-to-top button in div

Question

I have created button for back-to-top in the page. It appears after scrolling down, but right now it appears in the bottom right corner. Is there a way that I can position that button in div and make it appear always in the same place?

HTML and 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;
}

I am trying to position the button inside the <div class="container content">...</div> in the right corner. Currently it is moving with the page.

Answer 1

You can do it with fixed positioning as Marcos has suggested in his answer. Alternately, you can use jQuery to provide much smoother transition and also fade in and fade out options. See below :

$(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>

Answer 2

Yes, with CSS and fixed positioning:

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

Test it and tell us.