回到顶部，锚链接缓慢滑动

1、移动端商品比较多的时候回在固定位置有一个回到顶部或者底部的东西，实现原理是

 <script type="text/javascript">
         $( function () {
             var speed = 1000;//自定义滚动速度
            //回到顶部
             $( "#toTop").click( function () {
                 $( "html,body").animate({ "scrollTop" : 0 }, speed);
                 });
            //回到底部
            var windowHeight = parseInt($("body").css("height" ));//整个页面的高度
             $( "#toBottom").click(function () {
               $( "html,body").animate({ "scrollTop" : windowHeight }, speed);
            });
         });
   
 </script>

2、pc端锚链接点击滑动到相应的位置，但是要有一个缓慢滑动的效果。在js中插入一下代码便可以。

//锚点滚动
    $('a[href*=#],area[href*=#]').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                        scrollTop: targetOffset
                    },
                    500);
                return false;
            }
        }
    });

 

 

jquery animate 用法：

.animate( properties [, duration ] [, easing ] [, complete ] )

properties

类型: PlainObject

一个CSS属性和值的对象,动画将根据这组对象移动。

 

duration (默认: 400)

类型: Number or String

一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）

 

easing (默认: swing)

类型: String

一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）

 

complete

类型: Function()

在动画完成时执行的函数。

 

.animate( properties, options )

properties

类型: PlainObject

一个CSS属性和值的对象,动画将根据这组对象移动。

 

options

类型: PlainObject

一组包含动画选项的值的集合。 支持的选项:

• duration (default: 400)
  Type: Number or String
  一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
• easing (default: swing)
  Type: String
  一个字符串，表示过渡使用哪种缓动函数。（注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件）
• queue (default: true)
  Type: Boolean or String
  一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
• specialEasing
  Type: PlainObject
  由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。( 1.4 新增)
• step
  Type: Function( Number now, Tween tween )
  每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
• progress
  Type: Function( Promise animation, Number progress, Number remainingMs )
  每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。(version added: 1.8)
• complete
  Type: Function()
  在动画完成时执行的函数。
• done
  Type: Function( Promise animation, Boolean jumpedToEnd )
  在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
• fail
  Type: Function( Promise animation, Boolean jumpedToEnd )
  动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
• always
  Type: Function( Promise animation, Boolean jumpedToEnd )
  在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。

 更多资讯请查看  https://www.jquery123.com/animate/

 

时间是一个好东西，记录的是爱你的证据