关于跳转到指定位置的一些记录(页面底部)

在做移动端一个页面的时候,需要实现一个滚动到底部的功能,参照了之前写过的滚动到顶部的功能改了下代码,在此做下记录:

!function(){

    var timer =null;

    var isBottom =true;//定义一个布尔值,用于判断是否到达底部

    window.onscroll =function(){//滚动条滚动事件

        if(!isBottom){

            clearInterval(timer);

        }

        isBottom =false;

    }

    var bottom =0 ; //设置一个初始值

    $('.index-image').on('click',function(){

        timer =setInterval(function(){

            var osTop =$(document).height()-$(window).height();

            //用于设置速度差,产生缓动的效果

            var speed =Math.floor(osTop /6);

            bottom =document.documentElement.scrollTop =document.body.scrollTop =bottom +speed;

            isBottom =true;//用于阻止滚动事件清除定时器

            if(osTop ==bottom){//当达到底部时,清除定时器,并清空初始值

                clearInterval(timer);

                bottom =0 ;

            }

        },40);

    });

}();

以上就是实现一个有一个移动过程的滚动效果。这是其中一种滚动的方法,相应的滚动到顶部或者滚动到指定位置可以参照上面代码进行修改。还有另外一种是通过锚点进行定位。

示例如下:

跳转到demo1那个div

跳转到demo2那个div

demo1

demo2

锚点定位就是在a标签里,把它的href属性里的内容写为你要转到到的那个部分的id名称。

以上是我在不同阶段了解到的一些关于跳转到指定位置的方法。

你可能感兴趣的:(关于跳转到指定位置的一些记录(页面底部))