Page to top Bootstrap?

Bootstrap Studio Help
1

Hi Everyone,

Just want to say that this app is one of the best if not the best when talking about bootstrap and the responsive web! Just want to ask if anyone here has any ready made component for page to top, where you click an arrow and the page moves to the top (responsive of course).

To Martin and the crew, fantastic job. I'm an old timer in this game and after using so many different apps to help speed up my work, this is truly a Godsend; thank you!!

Any ready made page to top thingie would be welcome!

Cheers Basil

2

Hiya Basil,

I use one on most of the sites I create these days. You can see it here if you want to grab the code for it.

https://www.fpcbayminette.org/

Just scroll down the page just a bit and you'll see it in the bottom right corner.

I do believe there is one that I pulled most of the functioning from that's in the Online Components, but it's been many months since I did that so I don't know which one I may have done that with.

3

I just start a new project and select one of the templates from there. The blog is my favourite. I just switch around on a few things and I can make it my own.

4

Im pretty sure I added a component called back to top scroll as while back ?I'm sure others have too

5

I not sure this is what you are looking for but I put a scroll to top responsive in the components online share a couple of days a go. You can find it under scroll to top i named it (--mp-- Scroll to top) if it helps

6

Yep, thanks Jo, Chris, Michael ... Found the Scroll to Top, that one's Michael's though :)<br /> Does the job just fine ... Cheers

7

Figures.. Now that I just finished doing this I see this post..

Here's what I put together from the examples...

/-- Jquery Lib Required --/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="scrollTrack" id="scrollTrack">
    -- Your div or control here
</div>

/-- The Button that get displayed --/
<div class="scroll-top-wrapper">
    <i class="fa fa-2x fa-arrow-circle-up"></i>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(function(){
            $(document).on('scroll', function() {
                // Top of Div plus 50
                if($(window).scrollTop() >= $('.scrollTrack').offset().top + 100){
                    $('.scroll-top-wrapper').addClass('show');
                } else {
                    $('.scroll-top-wrapper').removeClass('show');
                }
            });

            // Attach the button
            $('.scroll-top-wrapper').on('click', scrollToTop);
        });

        function scrollToTop(){
            verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
            element = $('body');
            offset = element.offset();
            offsetTop = offset.top + verticalOffset;
            $('html, body').animate({scrollTop: offsetTop}, 300, 'linear');
        }
    });
</script>

I used Font awesome for the Button styling, but add your own.. Since my code is in a <DIV>, I have offset that calculations from the top of the page to account for that, and then added 100 pixels until the control becomes visible..

I am still looking for a way to make a routine that will be fully <DIV> specific for better control..

k.