<!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. HBase单节点的安装与配置

    HBase的安装配置1.下载:http://mirror.bit.edu.cn/apache/hbase/stable/   hbase-1.2.6-bin是直接编译好的,直接安装.   hbase- ...

  2. 0213Zabbix通过percona监控MySQL

    因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用,业界的同学们都使用Percona Monitoring Plugins 监控 MySQL的方式 Percona介绍 P ...

  3. Holedox Eating HDU4302 模拟

    Problem Description Holedox is a small animal which can be considered as one point. It lives in a st ...

  4. E - Super Jumping! Jumping! Jumping! DP

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

  5. Ubuntu 16.04下使用gcc输出汇编的.0文件为可执行文件时出现：`_start'被多次定义

    错误如下: `_start'被多次定义 /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:(.text+0x0):第一次 ...

  6. linux内核研究-8-块设备I/O层

    http://blog.csdn.net/rill_zhen/article/category/1123087

  7. influxDB系列（二）--查看数据库的大小

    google 搜索了好多文档,终于发现了这个靠谱的回答. https://groups.google.com/forum/#!topic/influxdb/I5eady_Ta5Y You can se ...

  8. SQL 2012中文乱码

    MS SQL插入汉字的时候.常常会遇到部分汉字变成了乱码问号了, 所以在安装数据库或者在创建表的时候须要注意一下几点: 1.保存汉字的字段要用NVARCHAR.NCHAR.NTEXT等.插入的时候要用 ...

  9. SQL SERVER:一条SQL语句插入多条记录等

    在学习排名第二的mySql过程中,发现它的插入语句可以这样写: use test; create table fruits( fid char(10) not null ,s_id int null ...

  10. kafka02