Question

我在右下角有一个按钮，用于返回顶部。它可以工作，但在移动/较小的屏幕上，它移动到文本后面，只有文本变得可点击。

<button type="button" id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button"><span class="fa fa-chevron-up">tesd</span></button>


<script>
    $(document).ready(function(){
        $(function(){
            $(window).scroll(function () {
                if ($(this).scrollTop() > 20) {
                        $('#back-to-top').fadeIn();
                    } else {
                        $('#back-to-top').fadeOut();
                    }
                });
                // scroll body to 0px on click
                $('#back-to-top').click(function () {
                    $('#back-to-top').tooltip('hide');
                    $('body,html').animate({
                        scrollTop: 0
                    }, 800);
                    return false;
                });

                $('#back-to-top').tooltip('show');
        });

    });
</script>

我把它放在身体之外，看看是否会改变，但事实并非如此。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Answer 1

这是我的方法：

将z-index属性添加到您的css

<button type="button" style="z-index:1000"; id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button"><span class="fa fa-chevron-up">tesd</span></button>

返回顶部的按钮在文本后面移动

1 个答案: