js平滑滚动到顶部,底部,指定地方 animate()

采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。

滚动到顶部：

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

滚动到指定位置：

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

示例演示地址：http://www.daixiaorui.com/Public/demo/js/scroll.html

源码参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js平滑滚动到顶部、底部、指定地方</title>

<style>

.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}

.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};

</style>

</head>

<body>

<div class="box a">产品介绍产品介绍 http://www.daixiaorui.com 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>

</div>

jQuery(document).ready(function($){

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});

});

</script>

</body>

</html>

转载于:https://www.cnblogs.com/i6010/articles/4167437.html

js平滑滚动到顶部,底部,指定地方 animate()相关推荐

js平滑滚动到顶部,底部,指定地方
为什么80%的码农都做不了架构师?>>> 滚动到顶部: $('.scroll_top').click(function(){$('html,body').animate({sc ...
js平滑滚动元素进入视图
将调用它的元素平滑地滚动到浏览器窗口的可见区域. 用于Element.scrollIntoView()滚动元素. 用于{ behavior: 'smooth' }平滑滚动. const smoothS ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
浏览器原生支持平滑滚动
原文地址:www.zhangxinxu.com/wordpress/?- 浏览器从去年年底开始,已经开始支持浏览器的原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIn ...
javascriptjquery 判断滚动到页面底部
js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2.代码 ...
CSS scroll-behavior 属性 — 纯 CSS 平滑滚动
CSS 中的 scroll-behavior 属性是一个非常新的属性.定义要求 scroll-behavior(尤其是在选择锚链接时)具有平滑的过渡动画外观,而不是默认的.更刺眼的即时跳转. html ...
jQuery-点击按钮页面滚动到顶部，底部，指定位置
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部$('.s ...
JS实现滚动监听以及滑动到顶部
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
简述:scrollTop是JavaScript中一个非常有用且重要的方法,它用于获取或设置元素的垂直滚动条位置,实现各种滚动相关的功能,无论是回到顶部.滚动到指定位置还是监听滚动事件,都需要用到scr ...

js平滑滚动到顶部,底部,指定地方 animate()

js平滑滚动到顶部,底部,指定地方 animate()相关推荐

最新文章

热门文章