CODEWITHSUNDEEP
javascripthtmlcss
Matthew Borg Carr
Matthew Borg Carr

Reputation: 23

Scroll to top JavaScript in HTML Website

I am trying to implement the scroll to top feature in my website: www.arrow-tvseries.com.

The "button" is seen on the website however it does not work properly, because when clicked its not scrolling to the top of the page. More over I would like that the "Scroll to top button" is visible when scrolled down, say half the page.

Here is the javascript code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"         type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$(window).scroll(function() {
    if($(this).scrollTop() != 200) {
        $('#backtotop').fadeIn();
    } else {
        $('#backtotop').fadeOut();
    }
});

$('#backtotop').click(function() {
    $('body,html').animate({scrollTop:0},800);
});
});
</script>

HTML Code (Head Tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"     "http://www.w3.org/TR/html4/frameset.dtd">

<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <title>Arrow-TvSeries - Home</title>

        <link rel="stylesheet" type="text/css" href="style.css">

    <!--back to top links-->
        <link rel="stylesheet" type="text/css" href="back_to_top.css">
        <script src="/scripts/back_to_top.js" type="text/javascript"></script>
    <!--end of back to top links-->

    <meta property="fb:admins" content="{793705343}"/>
    <!--Google Analytics-->
    <script type="text/javascript">
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
      ga('send', 'pageview');
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Arrow Tv Show">
    <meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen">
    <meta name="author" content="Ståle Refsnes">
    <meta charset="UTF-8">

    <!--IPAD setting-->
    <meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5,  maximum-scale = 1.25"/>
</head>

CSS Code:

#backtotop {
cursor : pointer;
/*display : none;*/
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter: alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 10000;
font-family: arial;
}

#backtotop:hover {
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}

Please feel free and let me know if you require further code or information.

Thanks

Upvotes: 0

Views: 14764

Answers (4)

kishoredbn
kishoredbn

Reputation: 2097

Try this and let me know if it is not working:

<!DOCTYPE html>
<html>
    <head>
        <style>
            input.pos_fixed
            {
                position:fixed;
                top:30px;
                right:5px;
            }
        </style>

        <script>
            function scrollWindow()
            {
                window.scrollTo(0,0);
            }
        </script>
    </head>

    <body>
        <br>
            <input class="pos_fixed" type="button" onclick="scrollWindow()" value="Scroll" />
        <br>
    </body>
</html>

Upvotes: 2

Chris Mukherjee
Chris Mukherjee

Reputation: 841

The problem is that your javascript file is actually written in HTML.

In your HTML head section, you should have:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/back_to_top.js" type="text/javascript"></script>

Then your back_to_top.js should contain only the following:

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 200) {
            $('#backtotop').fadeIn();
        } else {
            $('#backtotop').fadeOut();
        }
    });

    $('#backtotop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });
});

Upvotes: 0

Nick R
Nick R

Reputation: 7794

You could do something like this:

JSFiddle demo

$(window).scroll(function() {

    // if you have scrolled down more than 200px
    if($(this).scrollTop() > 200) {
        $('#backtotop').fadeIn();
    } else {
        $('#backtotop').fadeOut();
    }
});



$('#backtotop').bind('click', function(e) {
    e.preventDefault();
    $('body,html').animate({scrollTop:0},800);
});

Upvotes: 0

Ankit Zalani
Ankit Zalani

Reputation: 3168

You can do the same thing with below code:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Try this. Hope it helps.

Upvotes: 0

Related Questions