0

我正在尝试在我的网站中实现滚动到顶部功能：www.arrow-tvseries.com。

在网站上可以看到“按钮”，但它不能正常工作，因为单击它时它不会滚动到页面顶部。此外，我希望“滚动到顶部按钮”在向下滚动时可见，比如页面的一半。

这是javascript代码：

<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 代码（头部标签）：

<!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 代码：

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

如果您需要更多代码或信息，请随时告诉我。

谢谢

4

4 回答 4

2

试试这个，让我知道它是否不起作用：

<!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>
于 2013-06-19T19:52:14.093 回答
0

你可以用下面的代码做同样的事情：

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

尝试这个。希望能帮助到你。

于 2013-06-19T19:37:07.397 回答
0

你可以这样做：

JSFiddle 演示

$(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);
});
于 2013-06-19T19:39:09.657 回答
0

问题是您的 javascript 文件实际上是用 HTML 编写的。

在您的 HTMLhead部分中，您应该有：

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

那么你back_to_top.js应该只包含以下内容：

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

    $('#backtotop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });
});
于 2013-06-19T19:50:57.393 回答