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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>

<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"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

<div class="box bottom"></div>

<div class="location">

<p class="scroll_top">返回顶部</p>

<p class="scroll_a">产品介绍</p>

<p class="scroll_bottom">滑到底部</p>

</div>

<script type="text/javascript">

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>

使用jquery animate实现锚点慢慢平滑滚动效果的更多相关文章

  1. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  2. jQuery实现的文字逐行向上间歇滚动效果示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  4. jQuery下锚点的平滑跳转

    对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...

  5. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  6. 【Win10】实现 ListViewBase 平滑滚动

    首先解释下标题的 ListViewBase 是什么鬼.ListViewBase 我们可以查阅 MSDN 文档:https://msdn.microsoft.com/zh-cn/library/wind ...

  7. 如何在pyqt中实现平滑滚动的QScrollArea

    平滑滚动的视觉效果 Qt 自带的 QScrollArea 滚动时只能在两个像素节点之间跳变,看起来很突兀.刚开始试着用 QPropertyAnimation 来实现平滑滚动,但是效果不太理想.所以直接 ...

  8. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  9. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

随机推荐

  1. Xdebug的安装、配置和使用

    对于我这么一个渣渣php码农,平时总觉得echo.var_dump.print_r就能满足我的调试需求了,最近公司开始一个新项目,要大量阅读调试旧的源码,echo和var_dump开始不够用了,于是装 ...

  2. E - Super Jumping! Jumping! Jumping! DP

    Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...

  3. WebDev.WebServer40.EXE

    http://www.cnblogs.com/tong-tong/archive/2013/05/02/3049428.html 大学玩asp.net时就发现VS在Debug时会起一个web服务,这东 ...

  4. [Angular] New in V6.1

    Router Scroll Position Restoration: remember and restore scroll position as the user navigates aroun ...

  5. 在Ubuntu平台上创建Cordova Camera HTML5应用

    在这篇文章中,我们将具体介绍怎样使用Cordova Camera HTML5 应用.很多其它关于Cordova的开发指南,开发人员能够參考文章"the Cordova Guide" ...

  6. Cocos2d坐标系具体解释

    1.笛卡尔坐标系 左手坐标系(Direct3D坐标系),右手坐标系(Direct3D坐标系) 大拇指和食指分别相应x轴和y轴 2.UI坐标系 iOS/Android/Windows SDK中的通用UI ...

  7. Hibernate基于注解的双向one-to-many映射关系的实现

    在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...

  8. DDM实践：数据库秒级平滑扩容方案

    本文部分内容节选自华为云帮助中心的分布式数据库中间件(DDM)服务的产品介绍 背景 随着业务增长,逻辑库存储空间不足,并发压力较大. 解决方案 此时可对DDM实例逻辑库进行平滑扩容,通过增加RDS实例 ...

  9. HDU 5323 SOLVE THIS INTERESTING PROBLEM 爆搜

    pid=5323" target="_blank" style="">链接 Solve this interesting problem Tim ...

  10. MODULE_DEVICE_TABLE的理解【转】

    本文转载自:http://blog.csdn.net/sidely/article/details/39666471 在Linux IIC驱动中看到一段代码: static struct platfo ...