原生js的scrollTo来实现滚动到页面顶部。
// 页面滚动到顶部
// 方法一
document.body.scrollTop=document.documentElement.scrollTop=0
// 方法二
document.body.scrollIntoView()
// scrollIntoView 是元素也有的方法, 可以用在页面元素上,例如
document.getElementById('id').scrollIntoView()
//回到顶部
const scrollToTop = () => {undefined
const fromTopDistance = document.documentElement.scrollTop || document.body.scrollTop;
if (fromTopDistance > 0) {undefined
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, fromTopDistance - fromTopDistance/ 8);
}
}
//执行此方法
scrollToTop()
$(".scroll").click(function(event)
{
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target
//name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
js平滑滚动到顶部,底部,指定地方 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置 滚动到顶部:
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
滚动到指定位置:
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
如果不需要使用动画来滚动,则不需要使用到任何插件。
我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。
element.scrollTo(x-coord, y-coord);
//或者
element.scrollTo(options)
或者
element.scrollTo(0, 1000);
//ScrollToOptions
element.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。