[英]JavaScript - inline html onclick="bool = !bool" scope issue
[英]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;
}
如您所见,所有id都已准备好getElement,但我想将其删除并使其仅在内联时起作用
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>
尝试使用此工具将帮助您平滑滚动,并且此工具太容易使用了
$(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(用于链接)和id(用于div))上与您顺利配合时,请谨慎使用这2个属性,这将正常工作
您也可以在以下链接中找到演示示例,向您详细说明
您的小提琴与问题中提供的代码不同。 假设您的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
的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.