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提供更平滑的过渡，也可以淡入和淡出选项。见下文：

＆＃13;

$(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;
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何在div中定位back-to-top按钮

2 个答案: