【问题标题】:Simple scroll-to-top script not working简单的滚动到顶部脚本不起作用
【发布时间】:2013-09-19 00:04:49
【问题描述】:

啊,太让我沮丧了。我正在尝试使用简单的淡入淡出滚动到顶部脚本,但它在我的网站上不起作用,也许有冲突?

HTML:

 <a href="#" class="scrollup">Scroll</a>

CSS:

.scrollup{
width: 15px;
height: 15px;
position: fixed;
top: 50px;
left: 15%;
display: none;
text-indent: -9999px;
background: url('../images/arrow.png') no-repeat;
z-index: 5000;
}

查询:

$(document).ready(function(){ 

    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    }); 

    $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });

});

网址:http://kaye.at/test/

【问题讨论】:

  • 你有一个 js 错误说 jquery 没有定义。在运行脚本之前包含 jquery.js。
  • 金发时刻,谢谢。我确定我想到了!

标签: javascript jquery scroll fade


【解决方案1】:

您需要在调用$(function(){ 之前导入jquery 库。

&lt;head&gt; 元素中添加&lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;

另外,.no-touch .vs-container { overflow-x: hidden; } 防止在窗口文档上触发滚动事件。

【讨论】:

  • 在同一页上。
  • 似乎另一个脚本阻止了滚动事件,您的 javascript 是正确的...
  • 是的,它似乎是modernizr.custom.js,但我不知道如何修复它。
  • 这不是......它实际上是你的 CSS 代码。 .no-touch .vs-container { overflow-x: hidden; } 防止在窗口文档上触发事件。删除它或更改您的 CSS
  • 天才!非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多