hiI want when users scroll down it will appear button that when users click on it will go up to the page but it doesnt workbelow are codeslthead runat34server34gt lttitlegtlttitlegtltstylegt scrollToTop width100px height130px padding10px textaligncenter background whiteSmoke fontweight bold color 444 textdecoration none positionfixed top75px right40px displaynone background url39arrowuppn

Implement jQuery ScrollTop with animation in jQuery

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Apr 26, 2021 06:07 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2003

I want when users scroll down it will appear button that when users click on it will go up to the page but it doesn't work.

below are codes.

<head runat="server">
    <title></title>
<style>
 .scrollToTop{
    width:100px; 
    height:130px;
    padding:10px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    top:75px;
    right:40px;
    display:none;
    background: url('arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
    text-decoration:none;
}
#main {
    width:100%;
    height:2000px;
    border:1px solid red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="main">
            <a href="#" class="scrollToTop">Scroll To Top</a>
        </div>
    </form>
</body>
</html>

Best regards

Neda

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Apr 26, 2021 07:30 AM
Report

Hi nedash,

Code is working. Refer below demo.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <style>

        .scrollToTop {
            width: 100px;
            height: 130px;
            padding: 10px;
            text-align: center;
            background: whiteSmoke;
            font-weight: bold;
            color: #444;
            text-decoration: none;
            position: fixed;
            top: 75px;
            right: 40px;
            display: none;
            background: url('arrow_up.png') no-repeat 0px 20px;
            cursor: pointer;
        }

            .scrollToTop:hover {
                text-decoration: none;
            }

        #main {
            width: 100%;
            height: 2000px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Check to see if the window is top if not then display button
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('.scrollToTop').fadeIn();
                } else {
                    $('.scrollToTop').fadeOut();
                }
            });
            //Click event to scroll to top
            $('.scrollToTop').click(function () {
                $('html, body').animate({ scrollTop: 0 }, 800);
                return false;
            });
        });
    </script>
    <div id="main">
        <a href="#" class="scrollToTop">Scroll To Top</a>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Implement jQuery ScrollTop with animation in jQuery

Company

Explore

Follow us

Contact Us