`
gegewu0825
  • 浏览: 47416 次
社区版块
存档分类
最新评论

jQuery定位跳转插件（jquery.scrollto.js）

    博客分类：
  • js
scrollto 
阅读更多 
<html>
<head>
<title></title>

<script src="js/wjb/lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/wjb/ext/jquery.scrollto.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    function goto(id) {
        $("#" + id).ScrollTo(800);
    }
</script>
</head>
<body>
<br /><br />
<a  id="haha" style="color:Red;cursor:pointer;" onclick="javascript:goto('hehe');return false;">我跳↓</a>
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<div id="hehe" style="color:Red;cursor:pointer;" onclick="javascript:goto('haha');return false;">我再跳↑</div>
</body>
</html>

 

 

jquery.scrollto.js 内容如下：

jQuery.getPos = function (e)
{
    var l = 0;
    var t  = 0;
    var w = jQuery.intval(jQuery.css(e,'width'));
    var h = jQuery.intval(jQuery.css(e,'height'));
    var wb = e.offsetWidth;
    var hb = e.offsetHeight;
    while (e.offsetParent){
        l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
        t += e.offsetTop  + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
        e = e.offsetParent;
    }
    l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
    t  += e.offsetTop  + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
    return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
};
jQuery.getClient = function(e)
{
    if (e) {
        w = e.clientWidth;
        h = e.clientHeight;
    } else {
        w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
        h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
    }
    return {w:w,h:h};
};
jQuery.getScroll = function (e) 
{
    if (e) {
        t = e.scrollTop;
        l = e.scrollLeft;
        w = e.scrollWidth;
        h = e.scrollHeight;
    } else  {
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
    }
    return { t: t, l: l, w: w, h: h };
};

jQuery.intval = function (v)
{
    v = parseInt(v);
    return isNaN(v) ? 0 : v;
};

jQuery.fn.ScrollTo = function(s) {
    o = jQuery.speed(s);
    return this.each(function(){
        new jQuery.fx.ScrollTo(this, o);
    });
};

jQuery.fx.ScrollTo = function (e, o)
{
    var z = this;
    z.o = o;
    z.e = e;
    z.p = jQuery.getPos(e);
    z.s = jQuery.getScroll();
    z.clear = function(){clearInterval(z.timer);z.timer=null};
    z.t=(new Date).getTime();
    z.step = function(){
        var t = (new Date).getTime();
        var p = (t - z.t) / z.o.duration;
        if (t >= z.o.duration+z.t) {
            z.clear();
            setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
        } else {
            st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
            sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
            z.scroll(st, sl);
        }
    };
    z.scroll = function (t, l){window.scrollTo(l, t)};
    z.timer=setInterval(function(){z.step();},13);
};

 

分享到：
| X2 header 修改横排积分
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery.scrollTo 2.1.2

    1. **平滑滚动**：jQuery.scrollTo能够使页面元素平滑地滚动到指定位置，提供了一种优雅的用户体验，相比传统的JavaScript跳转，这种方式更加流畅且视觉效果更佳。 2. **动态效果**：该插件支持添加各种动画效果，...

    jQuery中的Scroll插件

    本文将深入探讨jQuery中的Scroll插件，特别是如何利用它来实现本页面跳转效果。 首先，jQuery Scroll插件并非jQuery核心库的一部分，而是由社区开发的一系列扩展，用于增强网页滚动功能。一个常见的Scroll插件是`...

    前端项目-jquery-scrollto.zip

    2. **jQuery ScrollTo插件源码**：包含主JavaScript文件（如`jquery.scrollTo.js`），这个文件实现了平滑滚动的核心逻辑。可能还会有minified版本（如`jquery.scrollTo.min.js`），用于生产环境以减少加载时间。 3....

    jQuery返回顶部滑动跳转效果.zip

    这个函数使用window.scrollTo()方法，结合jQuery的动画效果，使得页面能够平滑地滚动回顶部，而不是瞬间跳转。 **HTML** HTML（超文本标记语言）用于构建页面结构，包括返回顶部按钮。按钮通常会作为链接（标签）...

    jQuery滚动插件

    2. **引入滚动插件**：下载并引入jQuery滚动插件的JavaScript文件，例如：`scrolling-plugin.js`。 3. **初始化插件**：在页面加载完成后，使用jQuery选择器找到需要应用滚动效果的元素，并调用插件的方法进行初始...

    jquery页面位置定位导航.rar

    总结来说，"jquery页面位置定位导航.rar"提供的内容可能包括如何使用jQuery和scrollTo插件实现页面定位导航，以及如何构建响应式、高性能的导航系统。通过学习这些知识点，开发者可以提升其在创建交互性强、用户体验...

    jquery常用插件

    例如，jQuery scrollTo或backToTop插件。 6. **全屏插件**：全屏插件如FullPage.js或jQuery Fullscreen Plugin，能够让网站内容占据整个浏览器窗口，提供沉浸式的浏览体验。这些插件允许自定义导航、滚动效果和响应...

    jquery锚点带动画跳转

    jQuery 是一个广泛使用的JavaScript库，它提供了丰富的功能和简便的API，可以用来增强HTML和CSS的功能，包括实现锚点跳转的动画效果。本文将深入探讨如何使用jQuery实现锚点带动画跳转，并分享相关的知识点。 一、...

    jQuery手机左侧导航锚点定位代码.zip

    2. `js`文件夹：这里可能包含一个或多个JavaScript文件，其中至少有一个文件用于实现jQuery的导航定位功能。开发者通常会在文档加载完成后执行初始化代码，例如`$(document).ready()`函数，来确保DOM已经加载完毕再...

    jquery-scrollto

    - **动画滚动**：jQuery ScrollTo 提供了平滑的动画滚动功能，可以将页面元素平滑滚动到指定的位置，而不是瞬间跳转，提升了用户体验。 - **自定义参数**：用户可以根据需求调整动画速度、 easing（缓动函数）以及...

    JS控制div跳转到指定的位置的几种解决方案总结

    这些方法主要包括锚点法、jQuery的animate方法、window.scrollTo方法和scrollIntoView方法。下面将详细解析每种方法的原理、使用方法及优缺点。 1. 锚点法 锚点法是最传统且简单的方法，通过在URL中加入锚点（即使...

    JS如何实现在页面上快速定位（锚点跳转问题）

    JS实现页面快速定位的技术主要涉及锚点跳转的概念和应用。锚点，也被称作片段标识符，其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中，尤其是在内容较多、页面较长的情况下，合理使用锚点可以...

    JS锚点平滑跳转

    JS锚点平滑跳转则通过JavaScript代码来改善这一情况，使得页面滚动更加自然流畅。 一、基本原理 JavaScript锚点平滑跳转的核心在于监听锚点链接的点击事件，然后使用`window.scrollTo`方法或者CSS3的`scroll-...

    jQuery回到顶部插件scrollToTop特效代码

    这个插件是基于广泛使用的JavaScript库jQuery开发的，其目的是在用户滚动页面时提供一个方便快捷的方式让他们能快速回到页面的顶部。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、...

    jQuery右侧边栏二维码QQ客服返回顶部.zip

    在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript编程，使得开发者能够轻松地实现各种交互效果。在这个“jQuery右侧边栏二维码QQ客服返回顶部”项目中，我们将会探讨如何利用jQuery来...

    jQuery单页内跳转整站代码

    在jQuery中，我们可以使用`$.fn.scrollTo`插件或自定义函数来实现页面内平滑滚动效果。例如，当用户点击导航链接时，页面会平滑滚动到相应的目标位置： ```javascript $(document).ready(function() { $('a[href^=...

    jQuery平滑滚动到页面指定位置

    此外，还可以使用第三方插件如`jQuery.scrollTo`或`jQuery.localScroll`来简化实现过程，它们提供了更多的选项和自定义功能。例如，`jQuery.scrollTo`允许我们指定更多动画参数，如 easing 函数（缓动函数）和精确的...

    js定位示例

    本示例主要探讨了两种使用JavaScript进行定位的方法，包括原生JavaScript定位和jQuery定位，这两种方法都能帮助开发者实现当用户点击某个对象时，页面自动滚动至特定位置的效果。下面我们将详细讲解这两种定位方式...

    流畅的tab(选项卡)内容推荐

    `jquery.scrollTo-1.3.3.js` 是另一个jQuery插件，用于实现元素的平滑滚动效果。在Tab切换时，这个插件可以确保页面内容平滑地滚动到相应的位置，提供更好的视觉体验。 `jquery.serialScroll-1.2.1.js` 是jQuery...

    Jquery Html5多种导航滑动效果

    这可以使用Jquery的`.scrollTo()`插件或原生的`window.scrollTo()`方法，结合CSS3的`scroll-behavior: smooth`属性。 5. **轮播式导航**：如果网站有多个主栏目，可以设计成轮播式的导航条，每个栏目按顺序自动滑过...

Magicbox
Global site tag (gtag.js) - Google Analytics