资讯专栏INFORMATION COLUMN

jQuery实现平滑滚动到指定锚点的方法

Yujiaao / 953人阅读

摘要:本文实例讲述了实现平滑滚动到指定锚点的方法。代码通过使页面跳转至为的页面。代码锚点平滑滚动我是新手,有不足的问题希望提出。希望本文所述对大家的程序设计有所帮助。

本文实例讲述了jQuery实现平滑滚动到指定锚点的方法。
html代码


            

通过 a href使页面跳转至id为section_07的页面。
js代码

//锚点平滑滚动
    $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 600,
      easing: "linear"
    });
    return false;
    });

我是新手,有不足的问题希望提出。
希望本文所述对大家的jQuery程序设计有所帮助。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107484.html

相关文章

  • 单页面官网-平滑过渡指的锚点

    摘要:特点单页面官网不是传说中的单页面应用固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意,这给当前样式单独做了一个层,绝对定位,鼠标移动 特点 单页面官网--不是传说中的单页面应用!固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如:考拉微课 HTML布局 ...

    zhaot 评论0 收藏0
  • 单页面官网-平滑过渡指的锚点

    摘要:特点单页面官网不是传说中的单页面应用固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意,这给当前样式单独做了一个层,绝对定位,鼠标移动 特点 单页面官网--不是传说中的单页面应用!固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如:考拉微课 HTML布局 ...

    SegmentFault 评论0 收藏0
  • 单页面官网-平滑过渡指的锚点

    摘要:特点单页面官网不是传说中的单页面应用固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意,这给当前样式单独做了一个层,绝对定位,鼠标移动 特点 单页面官网--不是传说中的单页面应用!固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换如:考拉微课 HTML布局 ...

    tianhang 评论0 收藏0
  • scrollIntoView 与平滑滚动

    摘要:默认值为,表示立刻滚到底即表示平滑滚动。这时对锚点内链触发的视口滚动同样有效。它接受两种形式的值布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动老版的浏览器。表示行内元素排列方向要滚动到的位置。 经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分。对于这样的需求,很容易想到使用锚点实现。但有一个问题:滚动一步到位,太生硬了。 我还是比较喜欢平滑滚动。HTML5 中提...

    darkbug 评论0 收藏0
  • 导航栏固定、锚点平滑滚动

    摘要:页面用的框架页面布局导航导航一导航二导航三导航四导航栏固定页面滚动时导航栏高亮显示方案一为页面添加页面滚动监听事件滚动条距离顶端值滚动条距离顶端值加循环距离顶端值判断滚动条位置清除类 页面用的Bootstrap框架 页面布局 Toggle navigation ...

    Michael_Lin 评论0 收藏0

发表评论

0条评论

Yujiaao

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<