平滑滚动锚链接没有jQuery

是否可以使用平滑滚动来锚链接，但没有jQuery？我正在创建一个新网站，我不想使用jQuery。平滑滚动锚链接没有jQuery

2013-07-18 drozdzynski

@SLaks 25％？哈！是啊... – Ian

我尝试过使用纯js，但是它给了混蛋 –

jquery包含了很多无用的代码，你永远不会使用所有jquery的50％，所以去香草JS或者只从jquery得到你需要的东西 – sbaaaang

从这里使用功能：JavaScript animation并修改它来修改属性（不只是一个风格的属性），你可以尝试这样的事：

function animate(elem, style, unit, from, to, time, prop) { 
    if (!elem) { 
     return; 
    } 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1, (new Date().getTime() - start)/time); 
      if (prop) { 
       elem[style] = (from + step * (to - from))+unit; 
      } else { 
       elem.style[style] = (from + step * (to - from))+unit; 
      } 
      if (step === 1) { 
       clearInterval(timer); 
      } 
     }, 25); 
    if (prop) { 
      elem[style] = from+unit; 
    } else { 
      elem.style[style] = from+unit; 
    } 
} 

window.onload = function() { 
    var target = document.getElementById("div5"); 
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true); 
};

DEMO：https://jsfiddle.net/zpu16nen/

制作当然，你确定窗口的大小足够小，所以实际上有一个滚动条，并且可以滚动到第5个div。

不，不需要重新创建25％的jQuery。

这显然需要高度修改，具体取决于你的问题实际上意味着什么（比如当窗口哈希改变时，或类似的东西）。

注意与jQuery，它是那么容易，因为：

$(document).ready(function() { 
    $("html, body").animate({ 
     scrollTop: $("#div5").offset().top 
    }, 2000); 
});

DEMO：http://jsfiddle.net/7TAa2/1/

只是说...

来源

2013-07-18 20:31:48 Ian

对于那些试图解决这个问题的人来说：这是一个很棒的脚本，但不要指望任何缓动或好的补间。这是一种生动的动画。 –

类似的尝试：http://stackoverflow.com/questions/10063380/javascript-smooth-scroll-without-the-use-of-jquery＆http://stackoverflow.com/questions/8917921/cross-browser-javascript-不是jquery-scroll-to-top-animation –

在firefox中不能工作（不再？） – mtness

与:target选择CSS3过渡可以提供一个很好的结果没有任何JS黑客入侵。我只是在考虑是否要实现这一点，但如果没有Jquery，它会变得有点混乱。详情请参阅this question。

来源

2014-04-30 14:59:09

扩展这样的回答：https://stackoverflow.com/a/8918062/3851798

定义你的scrollTo的功能后，你可以通过你想scrollTo在功能的元件。

function scrollTo(element, to, duration) { 
    if (duration <= 0) return; 
    var difference = to - element.scrollTop; 
    var perTick = difference/duration * 10; 

    setTimeout(function() { 
     element.scrollTop = element.scrollTop + perTick; 
     if (element.scrollTop === to) return; 
     scrollTo(element, to, duration - 10); 
    }, 10); 
}

如果你有一个id = “页脚”

<div id="footer" class="categories">…</div>

在您运行滚动，你可以运行此脚本一个div，

elmnt = document.getElementById("footer"); 
scrollTo(document.body, elmnt.offsetTop, 600);

有你有它。平滑滚动没有jQuery。您实际上可以在浏览器的控制台上播放该代码并根据自己的喜好进行微调。

来源

2015-08-13 11:45:58

到目前为止最好的答案。清洁和可扩展。谢谢！ –

不要忘记用'duration <= 0'而不是'duration <0'（第2行）来修复它。 – julesbou

完美。简短而甜蜜，完成它。谢谢@Tejas Shah –

你可以使用这个javascript库来平滑滚动到你的所有内部链接。您也可以添加配置，以提供要忽略的链接。您可能会在这里查看详细信息。 https://codingninjascodes.github.io/SmoothScrollJs/

来源

2016-09-20 06:07:33 user3147343

纯轻量级的JavaScript库：smooth-scroll on github

来源

2017-11-02 00:47:04

其实，有更轻便和简单的方式做到这一点： https://codepen.io/ugg0t/pen/mqBBBY

function scrollTo(element) { 
 
    window.scroll({ 
 
    behavior: 'smooth', 
 
    left: 0, 
 
    top: element.offsetTop 
 
    }); 
 
} 
 

 
document.getElementById("button").addEventListener('click',() => { 
 
    scrollTo(document.getElementById("8")); 
 
});

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
div:nth-child(odd) { 
 
    background-color: white; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
}

<div id="1"></div> 
 
<div id="2"></div> 
 
<div id="3"></div> 
 
<div id="4"></div> 
 
<div id="5"></div> 
 
<div id="6"></div> 
 
<div id="7"></div> 
 
<div id="8"></div> 
 
<div id="9"></div> 
 
<div id="10"></div> 
 
<button id="button">Button</button>

来源

2017-11-16 05:03:29

唯一的问题是，不是''element.offsetTop''而是''element.getBoundingClientRect（）。 + window.scrollY'' – Braggae

使用此：

let element = document.getElementById("box"); 

element.scrollIntoView(); 
element.scrollIntoView(false); 
element.scrollIntoView({block: "end"}); 
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

DEMO：https://jsfiddle.net/anderpo/x8ucc5ak/1/

来源

2018-01-30 09:31:44 Anderpo

尝试添加一些解释 –

解释：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility –

非常有趣的解决方案（+1），但不是在目前的IE恶臭支持！ –

我最喜欢的滚动图书馆目前Zenscroll因为wide range of features和小尺寸（目前仅3.17kb）的。

未来，使用本地scrollIntoView功能可能会更有意义，但由于缺乏IE支持，现在大多数生产站点都必须进行多填充，所以我建议在所有情况下都使用Zenscroll。

来源

2018-02-21 12:32:45

平滑滚动锚链接没有jQuery

回答

相关问题