How do I make a scroll to top button appear when a pre-determined part of the page appears?

Question

I've got a scroll to top button I implemented via code that I got from one of the numerous examples out there. It works great. I changed the timing function for its appearance so that instead of appearing after 100 pixels it appears after 1340. I did this because there's some boxes on the right and I don't want the button to appear until they've been scrolled by and empty space thus appears for the button to fade in. The timing looked perfect -- the button appeared after what I figured was 1340 pixels from the top of the page.

However, I noticed that on a different (larger) screen the button didn't appear at the right time, but later. What I realized (if I gather correctly) was that the 1340 specification wasn't an absolute number of pixels from the top of the page, but was how many pixels had been scrolled through from the bottom of the browser window. For example, if I re-size the height of my browser window from, say, 1000 pixels to 400 pixels and reload the page, the button will appear 600 pixels too soon.

So my question is, is there a way to change my code so that the button appears only once a certain part of the page, measured from the top of the window, appears on screen?

Here's the javascript I'm currently using:

<script type="text/javascript">
    $(document).ready(function () {

        $(window).scroll(function () {
            if ($(this).scrollTop() > 1340) {
                $('#scrollup').fadeIn();
            } else {
                $('#scrollup').fadeOut();
            }
        });

        $('#scrollup').click(function () {
            $("html, body").animate({ scrollTop: 0 }, 500);
            return false;
        });

    });
</script>

Thanks for any help.

Check this question: http://stackoverflow.com/questions/4627203/jquery-trigger-action-when-a-user-scrolls-past-a-certain-part-of-the-page The first answer probally solves your problem. I tried resizing the screen and it still worked fine at the same position. — Stefan, Nov 21 '14 at 11:25
@Stefan Thanks for that. I'm, uh, assuming that would work. Now my pain in the butt question is, do you know how I would implement that into my code (I'm totally javascript ignorant). — Stromfeldt, Nov 21 '14 at 11:33
That answer still uses a specific number of pixels as a measurement, if I understand the question correctly the issue is that this number varies from display to display. Also using Waypoints is total overkill in this situation. — Alex, Nov 21 '14 at 11:33
Please check out the fiddle in my answer, as the offset of the div is calculated on the fly it doesn't matter what the context of the page is. — Alex, Nov 21 '14 at 11:42

score 2 · Accepted Answer · answered Nov 21 '14 at 12:12

2

Try this one--

<script type="text/javascript">
    $(document).ready(function () {
        ToggleScrollUp();

        $(window).scroll(function () {
            ToggleScrollUp();
        });

        $('#scrollup').click(function () {
            $("html, body").animate({ scrollTop: 0 }, 500);
            return false;
        });
    });

    function ToggleScrollUp() {
        if ($(".yourbox").offset().top < $(window).scrollTop() + $(window).height()) {
            $('#scrollup').fadeIn();
        } else {
            $('#scrollup').fadeOut();
        }
    }
</script>

answered Nov 21 '14 at 12:12

Pankaj Dubey

796
3
8
32

I'll take this as the solution but with the following note: What you have there results in my 40 pixel button appearing once the top 40 pixels of `.yourbox` appears in the screen. However, seeing how I wanted the button to appear below `.yourbox`, in my HTML I added a
after `.yourbox` and in my CSS gave it the height required for a gap. I then created a `
` right after that, the `#scroll-appear` replacing `.yourbox` in your JS. Perhaps your JS could be adapted so that the button appears not just at the bottom of but below `.yourbox`? Regardless, it works. Thanks.
– Stromfeldt Nov 22 '14 at 05:36
If possible, & if you know how to adapt your JS as per my comment above, it would be a cleaner solution & I'd implement it. As is, & seeing how I use Server Side Includes throughout out my site, if on a certain page there is no need for the scroll up button because there is minimal content on the left (`.yourbox` appears on the right), the gap & scroll up button are forced to show up. If, however, what I mentioned is possible, then without content on the left side of the screen `.yourbox` would butt up against the bottom of the page & the button wouldn't appear. Just thought I'd mention that. – Stromfeldt Nov 22 '14 at 05:39
@InAussieland I am not very clear with the scenario you explained. Can you edit your question with some snapshot of the page.. I believe that would be very helpful. – Pankaj Dubey Nov 23 '14 at 03:01

Alex · Answer 2 · 2014-11-21T12:10:35.580

1

Check out this fiddle: http://jsfiddle.net/ro39dkaL/2/

Instead of using 1340 calculate the position of the bottom of the boxes instead, you can calculate the position on the fly so it's always accurate to the situation:

$(document).ready(function () {

var elem   = $('#weblinks');  
var bottom = $(elem).position().top+$(elem).outerHeight(true)

    $(window).scroll(function () {
        if ($(this).scrollTop() > bottom) {
            $('#scrollup').fadeIn();
        } else {
            $('#scrollup').fadeOut();
        }
    });

    $('#scrollup').click(function () {
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });

});

edited Nov 21 '14 at 12:10

answered Nov 21 '14 at 11:27

Alex

2,651
2
25
45

Am I doing something wrong here? I replaced your "#boxes" with my "#weblinks" which is the final box that appears. I also replaced your "bottom" with "100". But the button appeared way too soon. I did trial and error until I found out that 1340 was the right #, but which appears at a different point when I resize the window, so I'm back to square one. Did I do something wrong? – Stromfeldt Nov 21 '14 at 12:00
Yeah you don't replace 'bottom', it is a variable. All you need to do is change the id from #boxes to be whatever your last element is, I guess from your comment it would be #weblinks. – Alex Nov 21 '14 at 12:04
I have updated the script to make it easier to use, please check out the updated fiddle as well. – Alex Nov 21 '14 at 12:11
Yeah, that's a funny one. I've got other boxes before the #weblinks box. Say, 1000px worth. The #weblinks box is, say, 200px in height. So when I do it all up, the button doesn't appear after the #weblinks but 200 pixels from the top of the page, in the midst of those 1000px of initial boxes. I tried creating a makeshift id, #scroll-height, set it to 1200px (although didn't include it in my HTML), then inserted #scroll-height instead of #weblinks into your code to see if that would work, but no. – Stromfeldt Nov 21 '14 at 12:46
Hold on, your jsfiddle may have changed a second time? I see more boxes, and it seems to be doing exactly what I want. Let me check that out. – Stromfeldt Nov 21 '14 at 12:47
I think you may have missed something here, did you change any of the above code at all? – Alex Nov 21 '14 at 12:48
I must have done something wrong. Your visually forthright jsfiddle seems to be doing exactly what I want. Checking.... – Stromfeldt Nov 21 '14 at 12:51
I found my (stupid) mistake, which was that the id I needed to implement wasn't `#weblinks` but `#links`. Regardless, when I got it all working as per your setup, the scroll up button would appear in different places when I resized the window. So again, no go. Another offered solution did work (for the most part), so I accepted that answer. Thanks for your troubles though. – Stromfeldt Nov 21 '14 at 23:51

score -2 · Answer 3 · answered Nov 21 '14 at 11:32

the 1340 specified is hard coded which wont be accurate in all cases.

A better solution is to find the height of the element w.r.t the browser window.

the jquery .offset() can be used.

var offset = $("#child").offset();
var fromTop = offset.top - $(window).scrollTop();

score -2 · Answer 4 · answered Nov 21 '14 at 11:48

-2

I made this fiddle and I use another way: as you can see, I placed a div with id scroll_toggle. When the user reaches this div (obviously you can remove the text, this is just a demonstration).

This is the fiddle: http://jsfiddle.net/afilini/7633pr0r/

answered Nov 21 '14 at 11:48

Alekos Filini

324
2
7

I already got a working solution, but if you want to see the entire code, this is where I originally got it from: http://www.jqueryscript.net/other/Smooth-Page-Scroll-to-Top-with-jQuery.html – Stromfeldt Nov 22 '14 at 01:48

How do I make a scroll to top button appear when a pre-determined part of the page appears?

4 Answers4