how to show an arrow button when scrolling a gridview in panel using java script and asp.net?

Question

how to show an arrow button when scrolling a gridview in panel using java script and asp.net?

HOUSSEM MAHJOUBI 286

Hi members

i want to show a button when scrolling a gridview in panel

i have tried in normal page and thats work fine this is my code

<script type="text/javascript">  
    $(document).ready(function () {  
        //Hide Back to top button  
        $("#btnScrollToTop").hide();  
        $(window).scroll(function () {  
            if ($(window).scrollTop() > 40) {  
                $('#btnScrollToTop').fadeIn();  
            } else {  
                $('#btnScrollToTop').fadeOut();  
            }  
        });  
        $('#btnScrollToTop').click(function () {  
            $('body').animate({  
                scrollTop: 0  
            }, 1000);  
        });  
    });  
</script>

how i can do that ?

please help

peiye zhu 165 Reputation points

2023-03-18T02:21:32.05+00:00

$？are you using jquery? what do you mean want to show a button when scrolling a gridview in panel
peiye zhu 165 Reputation points

2023-03-18T02:23:35.6333333+00:00

$? are you using jquery?
HOUSSEM MAHJOUBI 286 Reputation points

2023-03-18T07:37:19.2+00:00

yes i use jquery and the button that i talked about is an arrow

when the client scroll the page down it will appear and if he clicked the page will return to the top

i've added the code that make it work perfectly only

when he scroll the gridview in the panel the button didn't show because its not the page scrolling

its a panel scrolling

i need to how i get the height of scrolling in panel so i can add that condition to

if ($(window).scrollTop() > 40) && panel.height>40 {}

just for example that i added that because i have no idea how i get the height

i searched in google and tried to see if i get the height but no result

please help

Accepted answer

1 additional answer

Your answer

peiye zhu 165 Reputation points

2023-03-18T02:21:32.05+00:00

$？are you using jquery? what do you mean want to show a button when scrolling a gridview in panel
peiye zhu 165 Reputation points

2023-03-18T02:23:35.6333333+00:00

$? are you using jquery?
HOUSSEM MAHJOUBI 286 Reputation points

2023-03-18T07:37:19.2+00:00

yes i use jquery and the button that i talked about is an arrow

when the client scroll the page down it will appear and if he clicked the page will return to the top

i've added the code that make it work perfectly only

when he scroll the gridview in the panel the button didn't show because its not the page scrolling

its a panel scrolling

i need to how i get the height of scrolling in panel so i can add that condition to

if ($(window).scrollTop() > 40) && panel.height>40 {}

just for example that i added that because i have no idea how i get the height

i searched in google and tried to see if i get the height but no result

please help

Answer 1

Hi @HOUSSEM MAHJOUBI ,

Your code is setting the window's scrollbar, so it doesn't work.

What you need to set is the scrollbar of the panel.$("#pnlScroll").scroll

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {          
            $("#btnScrollToTop").hide();
            $(function () {
                $("#pnlScroll").scroll(function () {
                    if ($(this).scrollTop() > 10) {
                        $('#btnScrollToTop').fadeIn();
                    } else {
                        $('#btnScrollToTop').fadeOut();
                    }
                });
                $('#btnScrollToTop').click(function () {
                    $('#pnlScroll').animate({
                        scrollTop: 0
                    }, 800);
                    return false;
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">                                  
    <asp:Panel ID="pnlScroll" ScrollBars="Vertical" runat="server" Height="400px"
        Width="300px">        
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true"></asp:GridView>             
           <asp:Button ID="btnScrollToTop" CssClass="button" Text="Scroll up" runat="server" />
    </asp:Panel>                                                             
    </form>
</body>
</html>

Best regards,

Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

HOUSSEM MAHJOUBI 286 Reputation points

2023-03-21T08:53:53.62+00:00

thank you very much

Answer 2

peiye zhu 165


function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if(timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
function handle() {
	if(panel.scrollTop>100){
btnScrollToTop.classList.remove("hide");	
	}else{
btnScrollToTop.classList.add("hide");	
	}
}
panel.addEventListener('scroll', debounce(handle, 500));	
		btnScrollToTop.onclick=function(){
panel.scrollTop=0
		}

HOUSSEM MAHJOUBI 286 Reputation points

2023-03-21T08:54:04.05+00:00

thank you very much

Share via

how to show an arrow button when scrolling a gridview in panel using java script and asp.net?

1 additional answer

Your answer