Scroll to top JavaScript in HTML Website

Question

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

The answer to this question may be helpful to you: stackoverflow.com/questions/17043145/… — colestrode
– colestrode, Commented Jun 19, 2013 at 19:35
Also, you have a few syntax errors on your site, check the Console tab in Firebug (Firefox) or Google Chrome's Developer Tools - F12 — Nick R
– Nick R, Commented Jun 19, 2013 at 19:41
Just copy and pasted everything into the following jsFiddle: jsfiddle.net/hEhnt. The back to top button works there, but I made no changes to your code. — Chris Mukherjee
– Chris Mukherjee, Commented Jun 19, 2013 at 19:45
I posted a solution that allows you to keep your original code (because your code works!). There are other (possibly better?) ways to do what you want, but that was not your question. — Chris Mukherjee
– Chris Mukherjee, Commented Jun 19, 2013 at 20:21
The website is live at the moment, when I try it there it does not work... www.arrow-tvseries.com I will check out the solutions given in your comments and see what might be the problem, will also fix the syntax errors present im my code. I am a mac user and I'm using Safari and Chrome as browsers... — Matthew Borg Carr
– Matthew Borg Carr, Commented Jun 19, 2013 at 21:55

Chris Mukherjee · Accepted Answer · 2014-07-15 16:10:46Z

2

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>

edited Jul 15, 2014 at 16:10

Chris Mukherjee

8419 silver badges27 bronze badges

answered Jun 19, 2013 at 19:52

kishoredbn

2,1274 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Zalani · Accepted Answer · 2013-06-19 19:37:07Z

0

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.

answered Jun 19, 2013 at 19:37

Ankit Zalani

3,1886 gold badges30 silver badges48 bronze badges

Comments

Nick R · Accepted Answer · 2013-06-19 19:39:09Z

0

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);
});

answered Jun 19, 2013 at 19:39

Nick R

7,8142 gold badges24 silver badges33 bronze badges

Comments

Chris Mukherjee · Accepted Answer · 2013-06-19 19:50:57Z

0

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);
    });
});

answered Jun 19, 2013 at 19:50

Chris Mukherjee

8419 silver badges27 bronze badges

Collectives™ on Stack Overflow

Scroll to top JavaScript in HTML Website

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related