JS页面锚点滑动

原创 2017年01月03日 14:51:21

//主页面

<html>

<head>

</head>

<body>

<div id='s_1' ></div>

<div id='s_2' ></div>

<div id='s_3' ></div>

<div id='s_4' ></div>

</body>

</html>


<!--左侧边栏-->
<div class="scrollBar">
<div class="scroll_item">
<a class="common_scroll scroll_1 scroll_now" href="#s_1">
<span class="icon iconfont">&#xe613;</span>
<span class="text">基本情况</span>
</a>
<a class="common_scroll scroll_2" href="#s_2">
<span class="icon iconfont">&#xe633;</span>
<span class="text">个人信息</span>
</a>
<a class="common_scroll scroll_3" href="#s_3">
<span class="icon iconfont">&#xe600;</span>
<span class="text">服务对比</span>
</a>
<a class="common_scroll scroll_4" href="#s_4">
<span class="icon iconfont">&#xe62e;</span>
<span class="text">作品对比</span>
</a>
<a class="common_scroll scroll_5" href="#s_5">
<span class="icon iconfont">&#xe6c1;</span>
<span class="text">经历对比</span>
</a>
</div>

</div>


JS


$(".common_scroll").click(function() {
var h=$($(this).attr("href")).offset().top;
    $("html, body").stop(true,false).animate({
      scrollTop: h +"px"
    }, {
    duration: 500,
      easing: "swing"
    });
    return false;
  });


版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML+JS之点击按钮滚动到页面指定位置

在建站的过程中,我们难免遇到篇幅比较长的页面,这时候想看页面某个部分,如果是纯手动滚动那就略显笨拙 幸好JQ提供一个直接获取某盒子top位置的方法 offset() 该方法包含两个参数  top与l...
  • SoulArbiter
  • SoulArbiter
  • 2017年04月23日 20:53
  • 2629

鼠标滑动到当前页面触发动画效果

近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果。 一、首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用htm...
  • u013558749
  • u013558749
  • 2015年06月17日 15:01
  • 6714

Selenium如何滚动到页面底部

底下这段代码演示了如何滚动到页面底部。 public void scrollToBottom() { for (int i = 10; i > 0; i--) { //这里列出所有相似的元...
  • anly8828
  • anly8828
  • 2015年01月05日 15:31
  • 214

移动应用滑动屏幕方向判断解决方案,JS判断手势方向

问题分类 滑动屏幕打开相应功能操作。 问题描述 1、用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题。...
  • u011004053
  • u011004053
  • 2014年06月23日 17:29
  • 8830

JavaScript实现页面到滚动到指定位置执行某些操作

使用JavaScript实现页面滑动到指定位置加载动画。 若页面滚动到class名为group-pic的元素的位置时开始加载 $(document).ready(function(){ va...
  • u014304657
  • u014304657
  • 2017年08月07日 17:27
  • 1505

移动端上下滑动事件之--坑爹的touch.js

移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩。 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画。 接下来就说说...
  • minidrupal
  • minidrupal
  • 2014年09月27日 22:41
  • 9864

js 滚动/跳转页面到指定位置

要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方; 第二个是在B页面内部点击某个元素,滚动到页面的任何地方; 怎么解决啊?很简单,当然是用锚点。 首先在A页面创...
  • jodan179
  • jodan179
  • 2013年07月18日 11:04
  • 26895

html5 touch事件实现触屏页面上下滑动(一)

http://www.jb51.net/html5/438305.html 最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找...
  • yuanyuan_186
  • yuanyuan_186
  • 2016年04月15日 20:06
  • 4794

unity ugui实现整页滑动

using UnityEngine; using System.Collections.Generic; using UnityEngine.EventSystems; using UnityE...
  • LYHClever
  • LYHClever
  • 2017年04月13日 17:34
  • 1241

原生js利用鼠标滚轮实现滚动到当前页面实现动画效果

滚滚屏 原生js 动画 滚轮 mousewheel
  • u013558749
  • u013558749
  • 2016年12月04日 23:53
  • 5151
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS页面锚点滑动
举报原因:
原因补充:

(最多只允许输入30个字)