Scroll to top JavaScript in HTML Website

后端未结

关注

 4  1854

故里飘歌

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, becaus

相关标签:

4条回答

悲哀的现实

2021-01-26 13:57

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

0 讨论(0)

春和景丽

2021-01-26 14:00

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

0 讨论(0)

灰色年华

2021-01-26 14:05

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>

0 讨论(0)

耶瑟儿～

2021-01-26 14:07
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...