`
axl234
  • 浏览: 268456 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js根据内容高度分页

 
阅读更多
<script>
$(function(){
    //内容js分页
    var obj = $("#body")[0];
    var pages = $("#pages")[0];

    var pageCount = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));
    if(pageCount>1){   
        pages.innerHTML = "<b>共"+pageCount+"页</b> ";//输出页面数量
        for(var i=1;i<=pageCount;i++){
            pages.innerHTML += "<a class='jsPage' index='"+i+"'>第"+i+"页</a> ";//循环输出第几页
        }
    }

    $(".jsPage").click(function(){
        var _index = $(this).attr("index");
        var _top = (_index-1)*parseInt(obj.offsetHeight);
        $("#body").animate({'scrollTop': _top}, 'slow');    
    });        
});

</script>

 

 

                <div id="body">
                                   {dede:field.body/}
                </div>
                
                <div id="pages"></div>

分享到:
评论

相关推荐

    按高度进行分页代码

    标题“按高度进行分页代码”和描述提到的问题,就是如何根据内容区域的高度来实现分页功能。这种分页方式不同于传统的基于数据条目数量的分页,而是基于内容实际占据的视觉空间。 首先,我们看代码中的CSS部分: `...

    js分页javascript分页

    3. vue-paginate:针对Vue.js框架的分页组件,易用且高度可定制。 4. react-pagination:适用于React应用的分页组件,可与Redux等状态管理工具配合使用。 五、优化策略 1. 使用懒加载:只加载可视区域内的数据,当...

    js自动分页table.zip

    6. **自定义分页内容**:项目中提到分页内容可定义,这意味着开发者可以根据需求调整每页显示的数据条目数,甚至可以自定义分页样式和交互行为,提升用户体验。 7. **选择显示数据**:在实际应用中,用户可能需要...

    适配所有浏览器的js分页插件

    4. **自定义化**:插件支持高度定制,允许用户根据自己的需求调整样式、交互和功能,满足多样化的设计需求。 5. **响应式设计**:考虑到现代网页多设备访问的需求,插件内置了响应式布局,能够在不同的屏幕尺寸下...

    js对文章内容进行分页示例代码

    在今天的分享中,我们将详细探讨如何使用JavaScript实现文章内容的分页功能。此技术广泛应用于Web开发中,特别是在内容较多的文章、新闻或者评论列表需要按页显示时,分页技术可提升用户体验,使得页面加载更为迅速...

    VUE打印demo,自动分页

    在实际应用中,你可能需要根据具体需求来定制分页逻辑,例如根据内容长度动态调整每页的行数或元素数量。此外,你还需要考虑跨浏览器兼容性,因为不同的浏览器对打印功能的支持可能存在差异。 总结来说,这个“VUE...

    仿京东商品展示分页插件

    2. **自定义配置**:开发者可以根据需求自由配置分页样式,如每页显示的商品数量、分页按钮的数量、是否显示跳转输入框等,提供了高度的灵活性。 3. **响应式设计**:考虑到现代网页需要适应各种设备屏幕,此插件...

    jQuery分页插件pagination.js

    **jQuery分页插件pagination.js** 是一个广泛应用于网页数据分页的JavaScript库,它基于强大的jQuery框架构建,为开发者提供了高效、灵活的分页解决方案。分页是Web应用程序中常见的功能,特别是在处理大量数据时,...

    js实现分页的例子

    本示例“js实现分页的例子”是利用JavaScript来实现动态分页功能,尤其适用于上下滚动时自动加载更多内容的无限滚动效果。 JavaScript,简称JS,是Web开发中的主要脚本语言,它可以直接在浏览器端运行,负责处理...

    jquery带省略号的分页

    在实际项目中,你可能还需要根据服务器返回的数据动态计算总页数,并根据用户的操作如点击分页按钮来更新`currentPage`,进而重新渲染分页组件和加载对应页的数据。 此外,为了优化用户体验,我们还可以考虑添加...

    分页js插件

    laypage作为一个小巧而强大的JavaScript分页插件,不仅提供了基础的分页功能,还允许开发者根据需求进行高度定制。理解其工作原理和配置选项,能帮助我们在项目中更好地利用这一工具,提升用户体验。希望这篇文档对...

    js写的lyf分页插件

    总结,"lyf分页插件"通过简单易用的API和高度可定制化的特点,使得在网页中实现分页功能变得轻而易举。无论是个人项目还是企业应用,都能从中受益。在实际开发中,只需按照上述步骤和示例,就能快速集成并发挥其强大...

    paginationjs分页器案例

    Pagination.js是一个轻量级、高度可定制的JavaScript库,专门用于创建高效的前端分页组件。通过这个插件,开发者可以轻松地在网页上实现数据的分页展示,提高用户体验,特别是对于数据量较大的页面。 **知识点详解:...

    js+css实现的简单易用兼容好的分页.docx

    本文档介绍了一个使用JavaScript(JS)和层叠样式表(CSS)实现的简单、易用且具有良好兼容性的分页方案。 1. **HTML 结构**: HTML部分主要是一个包含id为`page`的`div`元素,这是分页组件的基础容器。在实际应用...

    js好用的动态分页插件.zip

    【标题】:“js好用的动态分页插件.zip”是一个包含JavaScript实现的高效动态分页功能的资源包。这个插件设计精巧,适用于网页项目,能够帮助开发者轻松实现数据分页展示,提高用户体验。 【描述】:描述中提到这个...

    Jquery拖拽分页插件Score

    在这些场景中,用户可能需要浏览大量的内容,拖拽分页的方式能让他们更快速地定位到感兴趣的部分。 总之,jQuery拖拽分页插件Score以其独特的交互方式和高度的可定制性,为Web开发带来了一种新的分页解决方案。通过...

    pagination - 前端分页插件

    4. 绑定事件:监听分页插件的翻页事件,当事件触发时,根据新的页码更新页面内容。 5. 自定义样式:根据项目需求,使用CSS修改分页组件的样式。 虽然提供的压缩包文件列表中没有具体的代码示例,但在实际开发中,...

    15个精美的jq分页插件

    12. **jQuery Simple Lazy Pagination**:延迟加载内容,仅在需要时才加载分页内容,节省资源。 13. **Masonry Pagination**:适合于瀑布流布局的分页插件,保持布局美观。 14. **Ajax Pagination with jQuery**:...

    jquery分页大全

    AJAX(Asynchronous JavaScript and XML)分页是通过异步加载数据实现的,用户无需刷新整个页面即可查看新一页内容。在jQuery中,可以使用$.ajax()方法或$.get()、$.post()等简化的API进行数据请求。分页插件如...

    瀑布分页javascript

    在这个场景中,"瀑布分页javascript"指的是利用JavaScript实现的瀑布流加载更多内容的分页功能。 瀑布流的核心在于如何计算和排列不同大小的元素,使得它们在页面上呈现出整齐且美观的布局。在JavaScript中,我们...

Global site tag (gtag.js) - Google Analytics