CODEWITHSUNDEEP
htmlbootstrap-4
jimbob
jimbob

Reputation: 461

Button for back to top moves behind text

I have a button in the bottom right corner for back-to-top. It works but on mobile/smaller screens it moves behind the text and only the text becomes clickable. 

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

I put this outside of body to see if that would make a change but it didn't.

enter image description here enter image description here

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

Upvotes: 0

Views: 368

Answers (1)

Atimene Nazim
Atimene Nazim

Reputation: 419

Here's my approach :

add z-index property to your 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>

Upvotes: 1

Related Questions