滑轮滑动+小圆点触发全屏上下滚动并实现不同浏览器窗口下的缩放

子化诗理

于 2017-11-21 13:53:22 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：需求整理开发过程中遇到的问题文章标签：滑轮滑动事件小圆点点击事件全屏上下滚动效果锚点跳转

本文链接：https://blog.youkuaiyun.com/webFront/article/details/78591631

该博客详细介绍了如何利用CSS和JavaScript实现全屏滚动效果，当滑轮滑动或点击小圆点时，页面会根据预设的锚点进行上下滚动。同时，当浏览器窗口大小变化时，内容区域会自动缩放以适应不同的视口尺寸。此外，还涉及到锚点跳转和滚动事件的处理，以确保在不同浏览器窗口下的良好体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css准备：模块宽度设置为100%；模块高度设置为100vh；内容区域设置为1000*800,居中显示;
js:$(function(){
           `//初始化页面置于顶部
            $("html,body").animate({scrollTop:0},300);
            var page = 0;
            //浏览器当前窗口可视区域宽度
            var viewWidth=$(window).width();
            //浏览器当前窗口可视区域高度
            var viewHeight=$(window).height();
            //窗口宽度小于1000时，缩放
            if(viewWidth<1000){
                //可视区域的高度+下侧滚动条的高度
                viewHeight+=17;
                $(".content-box1").css("transform",'scale('+(viewWidth/1500)+')');
                $(".content-box2").css("transform",'scale('+(viewWidth/1500)+')');
                $(".content-box3").css("transform",'scale('+(viewWidth/1500)+')');

            }
            //宽度小于800时，缩放
            if(viewHeight<800){
                $(".content-box1").css("transform",'scale('+(viewHeight/900)+')');
                $(".content-box2").css("transform",'scale('+(viewHeight/900)+')');
                $(".content-box3").css("transform",'scale('+(viewHeight/900)+')');
            }
	    //窗口变化时刷新页面
            $(window).resize(function() {location.reload();});
            //锚点跳转
            $(".anchor-btn1").on("click",function(){