onclick=“"javascript内联问题
onclick="" javascript inline issue
我已经找到了一个很棒的纯javascript代码来实现平滑滚动功能,但我不知道如何使用onclick内联函数。我相信这很简单,但我在javascript方面很弱。。。
<div class="navbar">
<button type="button" id="clickme">scroll whit class</button>
<button type="button" onclick="smoothScroll(third)" >not working yet</button>
</div>
<div class="third" id="third">The start of the red section!</div>
和smoothScroll函数javascript:
var targetY;
document.getElementById('clickme').addEventListener('click', function() {
smoothScroll(document.getElementById('third'));
});
window.smoothScroll = function(target) {
var scrollContainer = target;
headerSpace();
do {
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
}
while (scrollContainer.scrollTop == 0);
do {
if (target == scrollContainer) break;
targetY += target.offsetTop;
}
while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function() {scroll(c, a, b, i); }, 20);
}
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
function headerSpace() {
var header = document.querySelectorAll('.navbar');
targetY = -header[0].clientHeight;
}
正如你所看到的,有所有准备好的getElement by id,但我想删除它,使它只在内联中工作
onclick="smoothScroll(second)"
onclick="smoothScroll(third)"
onclick="smoothScroll(fourth)"
等等。。。。这是jsFiddle
var scrollContainer = document.getElementById(target);
target = document.getElementById(target);
然后在你的html 中
<button type="button" onclick="smoothScroll('third')" id="clickme">scroll whit onclick=""</button>
工作小提琴手https://jsfiddle.net/8ch4bon9/1
尝试使用这个将帮助您平滑滚动,而且使用太容易了
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
所有你需要的是有一个链接
<a href="#third">not working yet</a>
<div id="third"></div>
这将在绑定到任何div的任何链接(href(for link)&id(用于div))小心这两个属性,这将很好地工作
你也可以在下面的链接中找到一个演示示例,它将向你解释更多的
https://css-tricks.com/snippets/jquery/smooth-scrolling/
您的Fiddle与问题中提供的代码不同。假设你的Fiddle是最新的版本,它不起作用,因为你有两个id相同的按钮,根据HTML规范,这是无效的
<button type="button" id="clickme">scroll whit class</button>
<button type="button" id="clickme">scroll whit onclick=""</button>
因此,事件监听器只添加到第一个按钮,因为getElementById
只返回一个元素:
document.getElementById('clickme').addEventListener('click', function() {
你可以通过在第二个按钮上添加一个不同的id来解决这个问题:
<button type="button" id="clickme">scroll whit class</button>
<button type="button" id="clickme1">scroll whit onclick=""</button>
并添加第二个侦听器:
function scrollDiv()
{
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('third'));
}
document.getElementById('clickme').addEventListener('click', scrollDiv)
document.getElementById('clickme1').addEventListener('click', scrollDiv)
或者稍微干净一点,您可以向按钮添加一个类,并迭代document.getElementsByClassName
的结果
相关文章:
- javascript问题正文样式
- 将代码放入click函数时出现javascript问题
- 奇怪的javascript问题
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 多上传的JavaScript问题
- 使用YouTube iFrame API的IE中的JavaScript问题
- 关于函数的Javascript问题 - IIFE
- Javascript问题与下拉菜单上的单击事件有关
- JavaScript 问题 - 意外的令牌 (.
- Chrome 中的 JavaScript 问题
- 在javascript问题中应用复合css规则
- Javascript问题,flexslider脚本未加载
- document.write和document.innerHTML以及其他javascript问题之间有什么区别
- jQuery到纯javaScript问题
- javascript问题后的onblur和onfocus
- 谷歌地图API和JavaScript问题:-(
- 第三方javascript问题
- javascript问题中的全局变量
- 嵌套if的javascript问题
- 绑定的Javascript问题