我正在编写一个页面,我只想在没有任何插件或框架干扰的情况下使用UI的原始JavaScript代码.
而现在我正在努力寻找一种在没有jQuery的情况下顺利滚动页面的方法.
我现在几个小时都在寻找这个,我没有解决方案.我想要一个平滑的滚动到页面顶部.我已经有平滑的滚动来分隔页面中的锚点,.js文件附着在我的网站上,但我不能使用锚点作为顶部,因为我使用的是免费托管网站的模板,内置的页面构建工具不允许我在身体区域上方进行编辑.
这是我顺利滚动的地方.我一直在尝试设置"平滑滚动到元素 - 没有jquery插件"但我不知道如何在无数次尝试之后安排它.我也用过,window.scrollTo(0, 0);但它会立即滚动.谢谢!
另外:http:
//jsfiddle.net/WFd3V/ - 代码可能是标签,class="smoothScroll"因为我的其他元素使用它,但我不知道如何将它与href="javascript:window.scrollTo(0,0);"其他任何可能将页面混合的内容混合使用顶部没有锚.
我想平滑地滚动到一个元素而不使用jQuery - 只是纯粹的javascript.我希望通用功能能够向下滚动并平滑地向上滚动到文档中的特定位置.
我知道我可以在jQuery中使用以下内容:
$('html, body').animate({
scrollTop: $('#myelementid').offset().top
}, 500);
Run Code Online (Sandbox Code Playgroud)
我怎么用javascript做到这一点?
这就是我想要做的:
function scrollToHalf(){
//what do I do?
}
function scrollToSection(){
//What should I do here?
}Run Code Online (Sandbox Code Playgroud)
<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
<br>
<input type="button" onClick="scrollToSection()" value="Scroll To Section1">
<section style="margin-top: 1000px;" id="section1">
This is a section
</section>Run Code Online (Sandbox Code Playgroud)
在jquery我会这样做:
html, body{
height: 3000px;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
<br>
<input type="button" onClick="scrollToSection()" value="Scroll To Section1">
<section style="margin-top: 1000px;" id="section1">
This is …Run Code Online (Sandbox Code Playgroud)- >请转到编辑本课题的部分内容
我想同步两个div的滚动条,这就是我这样做的方式
var div1 = document.getElementById('element1'),
div2 = document.getElementById('element2');
div1.addEventListener('touchmove', scrolled, false);
div2.addEventListener('touchmove', scrolled, false);
function getscrollTop(node) {
return node.pageYOffset || node.scrollTop;
}
function scrolled() {
var node = this, scrollTop = getscrollTop(node);
var percentage = scrollTop / (node.scrollHeight - node.clientHeight);
var other = document.getElementById({
"element1": "element2",
"element2": "element1"
}[node.id]);
other.scrollTop = percentage * (other.scrollHeight - other.clientHeight);
};
Run Code Online (Sandbox Code Playgroud)
小提琴 - >用来scroll代替touchmove
但问题是它在低端设备中是闪烁的,并且希望在低端设备中使其平滑.
编辑
我使用下面的代码来平滑滚动
var children = document.querySelectorAll('.scrolldiv');
var getscrollTop = function(node) {
return node.pageYOffset || …Run Code Online (Sandbox Code Playgroud)