<!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. hdu 2647拓扑排序 容器

    #include<stdio.h> #include<queue> #include<vector> #include<iostream> using ...

  2. vue.js中的路由vue-router2.0使用

    在我们平时工作中,我们有时候会有需求,按照不同的规则,加载不同的组件,页面不去跳转,常见的操作是ajax的异步操作,实现局部刷新加载新数据 在vue中,我们写了很多不同的组件,这时候,实现不刷新调用新 ...

  3. 非常适合新手的jq/zepto源码分析06 -- 事件模型

    复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...

  4. DELPHI7加载UNICODE编码格式的TXT显示为乱码的解决方法

    DELPHI7的STRING默认是ANSI编码,加载UNICODE编码格式的TXT显示为乱码,解决方法如下: procedure TForm1.Button1Click(Sender: TObject ...

  5. java 反射和暴力反射 两个DEMO

    </pre><pre code_snippet_id="402084" snippet_file_name="blog_20140622_5_93502 ...

  6. go语言使用官方的 log package 来记录日志

    原文:https://www.goinggo.net/2013/11/using-log-package-in-go.html ------------------------------------ ...

  7. nmap，port扫描，获取sshserver的ip地址

    // 查看局域网的ip地址 arp - a // 同一个网段.假设用虚拟机桥接则不行 sudo nmap -sS 192.168.1.* //或者sudo nmap -sS -p 22 192.168 ...

  8. 性能测试实战-XYB项目-内网访问

    使用内网服务器,linux host绑定域名,相当于ip地址+域名的host绑定,只不过这里的ip是yc-sparks.schoolis.cn

  9. C++运算符重载的妙用

    运算符重载(Operator overloading)是C++重要特性之中的一个,本文通过列举标准库中的运算符重载实例,展示运算符重载在C++里的妙用.详细包含重载operator<<,o ...

  10. react State改变，页面却没有改变

    react 小白编程 做项目时遇到了个问题,无论我怎么查看我的action.reducer 还是 dispatch 函数,都没有发现有什么毛病.但是 debugger 的时候,state 改变了,页面 ...