- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 JavaScript 和 jQuery 的初学者。我的 css 和 JavaScript 代码位于 html 文件外部。这个问题已经有了答案,我尝试了所有代码,但滚动不起作用。我不知道我错过了什么。 jQuery 已安装(甚至 CDN)。嗯,这段代码在代码片段中工作,所以可能是 javaScript 或 JQuery 出了问题。我仍然不知道我的错误是什么。请帮忙。
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script>window.jQuery || document.write('<script src="JQuery.js"><\/script>');</script> <!-- JQuery library -->
<script src="js/script.js" type="text/javascript"></script> <!-- my javascript -->
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
</body>
</html>
最佳答案
我已将(为了简化测试)所有元素合并到单个 .html 文件中,并进行了一些修改,它对我有用:
script
标记移动到文档末尾document.ready()
逻辑<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<style type="text/css">
.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;}
.main{ width: 100%; height:500px; background:black; }
.first{ width: 100%; height: 1000px; background: green; }
.second{ width: 100%; height: 1000px; background: blue; }
</style>
<div class="main">
<button id="btn1" type="button" class="button1">Sign Up</button>
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div>
<div id="fir" class="first"></div>
<div id="sec" class="second"></div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN -->
<script type="text/javascript">
$( document ).ready(function() {
$("#btn1").click(function() {
$('html,body').animate({
scrollTop: $("#fir").offset().top},
'slow');
});
$("#btn2").click(function() {
$('html,body').animate({
scrollTop: $("#sec").offset().top},
'slow');
});
});
</script>
</body>
</html>
关于javascript - 按钮点击平滑滚动 : Not working for me but works great in the Code Snippet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36042436/
我在Eloquent JS的“高阶函数”一章中的“Great-great-great-great -...”示例中苦苦挣扎。我不明白这些功能之一是如何从仅包含祖先数据的对象中创建一个值的。功能如下:
我需要帮助编写以下方法: def get_new_location(current_location, target_location, distance_travelled): ...
我需要帮助编写以下方法: def get_new_location(current_location, target_location, distance_travelled): ...
我一直在使用 static 关键字来定义内部链接。后来,我改用 C++ 风格,将本地事物包装在匿名命名空间中。 然而,当我使用匿名命名空间多年后,我开始认为 static 关键字更容易使用! 一个常见
目前,我正在通过输入列列表来使用 expect_table_columns_to_match_set 验证表架构。但是,我想验证与每一列关联的架构,例如 string。唯一可用的 Great Expe
我对 Great Expectations 相当陌生 - 并且有一个问题。本质上,我有一个 PostgreSQL 数据库,每次运行数据管道时,我都想根据某个键验证 PostgreSQL 表的特定子集。
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 2 年前。 Improve
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 2 年前。 Improve
我正在阅读 the introduction of Learn You a Haskell for Great Good我无法理解以下对“懒惰”一词的解释。 Say you have an immut
我是 JavaScript 和 jQuery 的初学者。我的 css 和 JavaScript 代码位于 html 文件外部。这个问题已经有了答案,我尝试了所有代码,但滚动不起作用。我不知道我错过了什
我正在使用 Python 和 Sqlalchemy 在 Sqlite 数据库中存储纬度和经度值。我创建了一个 hybrid method对于我的 Location 对象, @hybrid_method
我正在使用 Python 和 Sqlalchemy 在 Sqlite 数据库中存储纬度和经度值。我创建了一个 hybrid method对于我的 Location 对象, @hybrid_method
我通过长城购买了 VPN。我只想知道如何为 OS X 的 GitHub 客户端设置代理。 在shell中是这样的 $ ssh -T git@github.com Warning: Permanentl
我有一个带有 PostGRE SQL 的 NestJS/TypeORM 项目。 我想删除一些表,所以我删除了相关的文件夹。我还删除了 dist 文件夹以再次构建项目,但即使这样,typeORM 也没有
最近我们每个月都会遇到一次如标题所述的问题。在metastore节点上,我们安装并启动了ntpd服务以与kerberos服务器同步时间。节点上的 krb5.conf 如下所示: [lib默认值] de
我想知道是否有人可以就此问题提出建议: 我有一个这样定义的 C11 类型通用宏 #define hash_table_fetch(H,K,D) ((D *) _Generic((K), \ i
我对数据库和GIS不太感兴趣,我对在MySql数据库上使用这个函数来计算两点之间的距离有以下疑问。 我从本教程开始,其中有一个用于计算两个点字段之间的距离的函数: CREATE FUNCTION ea
我发现将 div 的宽度设置为 100% 会使其宽度与其父级相同,但是否有可能(可能使用 CSS 选择器)将其设置为等于父级以上 3 级?我正在尝试制作这样的大型菜单:http://www.theno
我正在使用 D3 Library 的版本 4到目前为止,我无法在 Symbol Map 上的点之间绘制连接线。 .在示例中,从早期版本的库中,绘制连接线是使用以下代码完成的: // calculate
我是一名优秀的程序员,十分优秀!