`

页面内滚屏处理

阅读更多

1:obj为id号

/**
    *页面滚动到指定位置
    */
    function goTotop(obj){
        var _targetTop = $('#'+obj).offset().top;//获取位置
        $("html,body").animate({scrollTop:_targetTop},300);//跳转 300毫秒
    }

 

2:固定图层 ,页面滚动到顶部

#backTop{
    width:40px;
    height:40px;
    position:fixed;//固定图层

    z-index:9999999; //图层置于顶层(足够大)
    right:10px;
    bottom:300px;
    display:none;
    border-radius:3px;//圆角
    background:url(../images/backTop.png) 0 0 no-repeat;
    cursor:pointer;
}

 

$(function() {
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
} else{
    $("body").append('<div id="backTop"></div>');
   
    $(window).scroll(function(){
        if ($(window).scrollTop()>100){//滚动100px时,出现
            $("#backTop").fadeIn(400);
        }else{
            $("#backTop").fadeOut(400).hide();
        }
    });
   
    $("#backTop").click(function(){
        $('body,html').animate({scrollTop:0},200);
        return false;
    });
   
}
});

 

注意:同理如果要让某个图层居顶显示(不管滚动条如何滚动),可以加

.navWrapFix{ position:fixed; top:0; left:0; width:100%; z-index:1999; background:#fff;opacity:0.9;filter:alpha(opacity=90); border-bottom:1px solid #f1f1f1;box-shadow:0 0 3px #ccc;}

分享到:
评论

相关推荐

    js实现页面自动滚屏效果

    有时我们可能希望将滚屏效果绑定到页面上的某个元素。例如,当用户在特定元素上滚动鼠标时,页面整体跟随滚动。这可以通过监听元素的`mousewheel`或`wheel`事件来实现: ```javascript document.getElementById('...

    jQuery全页面横向定位滚屏.rar_earlyvsy_jQuery全页面横向定位滚屏

    《jQuery全页面横向定位滚屏:打造动感网页新体验》 在现代网页设计中,创新的用户体验已经成为吸引用户的关键因素之一。"jQuery全页面横向定位滚屏"正是这样一种技术,它利用jQuery库的高效性和灵活性,为网页浏览...

    双击页面自动滚屏效果.rar

    总的来说,"双击页面自动滚屏效果"是一个结合了JavaScript事件处理、定时器和页面滚动操作的实例,展示了前端开发中如何通过编程提升用户体验。通过学习和理解这个项目,开发者可以进一步提升自己在JavaScript特效和...

    全页面横向定位滚屏.zip

    全页面横向定位滚屏是一种网页设计中的特殊效果,它允许用户在水平方向上滚动浏览页面内容,而不是传统的垂直滚动方式。这种效果常用于创建独特、引人注目的用户体验,尤其适用于展示宽幅图像、产品展示或者全屏广告...

    html5仿创客贴官网滚屏页面展示模板.zip

    8. **Web Workers和Web Socket**:通过Web Workers,开发者可以实现后台多线程处理,提高复杂计算的性能,而Web Socket则提供双向实时通信,对于实时更新的滚屏内容非常有用。 9. ** Semantic 标签**:HTML5引入了...

    jquery实现注册页面左右滚屏效果.zip

    总结来说,实现jQuery注册页面左右滚屏效果的关键在于结合HTML5的新特性构建页面结构,使用jQuery处理滚动事件并平滑滚动,通过CSS3添加动态效果和响应式设计,以及适当使用图片资源增强视觉表现。这样的技术组合...

    jquery实现注册页面左右滚屏效果

    "jQuery实现注册页面左右滚屏效果"是一种独特的设计方法,它打破了传统的上下滚动模式,为用户带来全新的浏览体验。这种设计常见于现代网页和移动应用中,尤其是在注册或登录页面,以简洁、直观的方式展示信息。 ...

    jQuery html5响应式页面滚屏代码.zip

    【jQuery html5响应式页面滚屏代码】是一个利用JavaScript库jQuery和HTML5技术实现的现代网页设计元素。这种效果使得网站内容能够以一种流畅、动态的方式在垂直方向上滚动,提供了一种新颖的用户交互体验。它适用于...

    可以截滚屏的超强截图软件哦

    传统的截图工具通常只能捕获当前屏幕视窗内的图像,但当需要记录超出单个屏幕范围的信息时,滚屏截图就显得非常高效。它能够自动拼接多张截图,形成一个完整的长图,确保所有信息都能被完整地保存下来。 标题提到的...

    jQuery+html5响应式页面滚屏代码.zip

    "jQuery+html5响应式页面滚屏代码.zip" 包含的资源正是为了实现这一目标,结合了jQuery库、HTML5、CSS和JavaScript技术,创建出一种在不同屏幕尺寸下都能流畅滚动的网页体验。 jQuery是一个广泛使用的JavaScript库...

    支持滚屏截图的截图软件

    滚屏截图,顾名思义,是能够捕获整个滚动区域的截图方式,无论是网页、长文章还是多页面的文档,都能一气呵成地完整截取。SnagIt作为一款专业的截图软件,不仅具备此项功能,还具备多种截图模式,如矩形、自由形状、...

    javascript实现页面滚屏效果

    总结来说,实现页面滚屏效果需要结合HTML、CSS和JavaScript技术。在HTML中构建页面结构,用CSS对页面元素进行布局和样式设定,再通过JavaScript来添加交云动性,监听用户的滚动行为,并相应地调整页面元素的显示。这...

    滚屏截图工具

    滚屏截图工具是一种高效、便捷的屏幕捕捉软件,专门针对需要截取长页面或滚动内容的用户设计。在传统的截图方式中,用户通常需要多次截取屏幕并手动拼接,而滚屏截图工具则能够一次性捕获整个滚动区域,如网页、文档...

    jQuery html5响应式页面滚屏翻页展示特效

    【jQuery html5响应式页面滚屏翻页展示特效】是一种现代网页设计技术的结合,它利用了jQuery库的强大力量以及HTML5和CSS3的新特性,为用户提供了一种流畅且适应不同设备屏幕的滚动浏览体验。这种效果常用于创建具有...

    双击页面自动滚屏效果特效代码

    综上所述,实现双击页面自动滚屏效果特效涉及了JavaScript事件处理、DOM操作、浏览器兼容性处理、CSS样式控制以及可能的用户交互设计原则。通过理解这些知识点,并结合提供的代码文件,可以有效地在自己的网页项目中...

    单页视觉差滚屏

    单页视觉差滚屏是一种网页设计技术,它在滚动页面时创造出一种深度效果,使得背景元素与前景元素的运动速度不同,从而产生立体感和动态视觉冲击力。这种技术常见于现代网页设计中,用于提升用户体验,特别是对于展示...

    android 自动滚屏源码

    你需要自定义一个`PagerAdapter`子类,重写`instantiateItem()`和`destroyItem()`方法,分别处理页面的创建和销毁。 3. **自动滚动**: 要实现自动滚屏,需要设置一个定时器(如`Handler`或`CountDownTimer`)来定期...

    html5仿创客贴企业官网滚屏页面html模板.zip

    首先,滚屏页面是当前网页设计的流行趋势,它允许用户通过滚动鼠标或触摸屏幕浏览多层内容,而无需点击不同的链接。这种设计风格尤其适合企业官网,因为它可以展示公司的多个产品、服务或项目,同时保持页面整洁且...

    asp.net 滚屏实现实例

    总之,ASP.NET滚屏实现实例是通过结合服务器端和客户端技术,以及适当的数据处理和用户交互设计,实现的一种动态网页效果。这种效果不仅提高了信息展示的效率,还提升了网站的互动性。通过学习和实践这个实例,...

    html5仿创客贴官网滚屏页面展示模板.rar

    在“js”文件夹中,可能有JavaScript文件或库,如jQuery、Vue.js或其他自定义脚本,用于处理用户交互、页面动态加载、滚屏事件监听等功能。例如,当用户滚动页面时,可以使用JavaScript来触发不同的内容区域显示,...

Global site tag (gtag.js) - Google Analytics