谁有思路写一下锚点平滑 - 社区

0

shanshan

哈喽，你可以先试着自己做一下，然后把你遇到的问题提交上来，讲师下课后会帮你回复的~~

2013-05-25 10:38 回复本帖

0

monica

你的这个效果，之前有网友在论坛里面分享过哦~~

地址是：http://bbs.miaov.com/forum.php?mod=viewthread&tid=6725

你可以看看学习下~~{:soso_e112:}

2013-05-26 13:18 回复本帖

0

lwj4755

monica 发表于 2013-5-26 13:18 forum.php?mod=redirect&goto=findpost&pid=19640&ptid=6812
你的这个效果，之前有网友在论坛里面分享过哦~~

地址是：http://bbs.miaov.com/forum.php?mod=viewthread& ...

管理员不是这个哦！

2013-05-28 21:59 回复本帖

0

创美易-miaov

lwj4755 发表于 2013-5-28 21:59 forum.php?mod=redirect&goto=findpost&pid=19684&ptid=6812
管理员不是这个哦！

高崎，你不是写好了吗？

2013-05-29 09:23 回复本帖

0

无为

思路是控制滚动条滚动，跟我们官网的返回顶部效果是一样的原理。

2013-05-29 15:09 回复本帖

0

创美易-miaov

无为发表于 2013-5-29 15:09 forum.php?mod=redirect&goto=findpost&pid=19694&ptid=6812
思路是控制滚动条滚动，跟我们官网的返回顶部效果是一样的原理。

他说的这样的效果：
http://www.rwx.la/pro_info.asp?id=97

无为老师，这种效果我也是好久就想做了，但是就是没有思路，也不会写。

可以demo一下，解答一下吗？先谢谢了。

2013-05-29 16:39 回复本帖

0

lwj4755

无为发表于 2013-5-29 15:09 forum.php?mod=redirect&goto=findpost&pid=19694&ptid=6812
思路是控制滚动条滚动，跟我们官网的返回顶部效果是一样的原理。

有看官方的能帮忙写一个参考的么就浏览器的滚动条

2013-05-30 17:33 回复本帖

0

monica

lwj4755 发表于 2013-5-30 17:33 forum.php?mod=redirect&goto=findpost&pid=19722&ptid=6812
有看官方的能帮忙写一个参考的么就浏览器的滚动条

这个恐怕是没时间了，因为老师们白天要上课，晚上也要做些公司其他的业务的事情，毕竟我们这头的人员有限，像论坛上贴出代码的提问，老师们也是抽时间给看的，像这样直接求效果的，恐怕是近期没那个时间写了，所以建议你最好是把问题细化到具体知识点上，这样效率也高些，也对你自身也有好处，希望理解~~{:soso_e121:}

2013-05-31 12:10 回复本帖

0

潇潇

[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
body{}
#container{ width:1000px;height:3000px; margin:0 auto; padding:0 10px; position:relative;border:1px solid #eee; }
#div1{width:500px;height:30px; background:#747474;position:absolute;top:200px; border:1px solid red;}
#div1 ul{ list-style:none;}
#div1 li{float:left;padding:4px; border:1px solid #ccc;}
#div1 li.active{ background:green; color:red;}
#fn1,#fn2,#fn3,#fn4{width:100px;height:30px;background:#ccc;border:1px solid #131313;}
#fn1{position:absolute;top:700px;}
#fn2{position:absolute;top:1000px;}
#fn3{position:absolute;top:1300px;}
#fn4{position:absolute;top:1500px;}
</style>
<script type="text/javascript">

window.err=function(){

var oFn1=document.getElementById("fn1");
var oFn2=document.getElementById("fn2");
var oFn3=document.getElementById("fn3");
var oFn4=document.getElementById("fn4");
var oDiv=document.getElementById("div1");
var aLi=oDiv.getElementsByTagName("li");
var arr=[];
arr.push({top:oFn1.offsetTop,left:oFn1.offsetLeft});
arr.push({top:oFn2.offsetTop,left:oFn2.offsetLeft});
arr.push({top:oFn3.offsetTop,left:oFn3.offsetLeft});
arr.push({top:oFn4.offsetTop,left:oFn4.offsetLeft});
arr.push({top:oDiv.offsetTop,left:oDiv.offsetLeft});
window.onscroll=function(){
var iScrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
scrollFixed(iScrollHeight);
show(iScrollHeight);
function scrollFixed(num){

  if(num>arr[4].top){
    oDiv.style.position="fixed";
    oDiv.style.top="0";
    oDiv.style.zIndex=999;
    }else{
    oDiv.style.position="absolute";
    oDiv.style.top=arr[4].top+"px";
    }
}
function show(num){
   var arrtemp=[];
    for(var i=0;i<aLi.length;i++){
         if(num>arr[i].top){
            arrtemp.push(i)
            }
        }
    var iMax=arrtemp[arrtemp.length-1];
    for(var i=0;i<aLi.length;i++){
        for(var j=0;j<aLi.length;j++){
            aLi[i].className="";
            }
        aLi[iMax].className="active";
        }
}

};
};
</script>
</head>

<body >
<div id="container">
<div id="div1">
<ul>
<li>事件1</li>
<li>事件2</li>
<li>事件3</li>
<li>事件4</li>
</ul>
</div>
<div id="fn1">事件1</div>
<div id="fn2">事件2</div>
<div id="fn3">事件3</div>
<div id="fn4">事件4</div>
</div>
</body>
</html>[/html]
写了一个，布置是不是你要的

2013-05-31 12:24 回复本帖

0

创美易-miaov

潇潇发表于 2013-5-31 12:24 forum.php?mod=redirect&goto=findpost&pid=19740&ptid=6812
[html]

是的，但是为什么不能滑动呢？

还有，这是什么原理？

2013-05-31 13:01 回复本帖

0

创美易-miaov

潇潇发表于 2013-5-31 12:24 forum.php?mod=redirect&goto=findpost&pid=19740&ptid=6812
[html]

是的，但是为什么不能滑动呢？

还有，这是什么原理？

2013-05-31 13:02 回复本帖

0

潇潇

初始化的时候：获取所有的标题到页面顶部的距离，滚动事件的时候：判断滚动条的高度，超过指定的标题到页面顶部的距离没，依次循环比较滚动条高度与所有的标题高度，满足条件的存入一个数组，数组最后一个就是距离滚动条高度最近的标题，再开一个循环，先清除所有导航条中的样式，在设置设置最接近滚动条高度的标题的样式

2013-05-31 13:33 回复本帖

0

创美易-miaov

潇潇发表于 2013-5-31 12:24 forum.php?mod=redirect&goto=findpost&pid=19740&ptid=6812
[html]

哦，明白一些了

2013-05-31 22:26 回复本帖

0

创美易-miaov

潇潇发表于 2013-5-31 12:24 forum.php?mod=redirect&goto=findpost&pid=19740&ptid=6812
[html]

你这个可以是可以，但是实际项目中是不可用的，因为#fn1、#fn2、#fn3、#fn4是不会用绝对定位的。

那该这么解决？

2013-05-31 22:37 回复本帖

0

lwj4755

潇潇发表于 2013-5-31 12:24 forum.php?mod=redirect&goto=findpost&pid=19740&ptid=6812
[html]

谢谢你哦！可惜写错了方向应该是点导航事件1然后页面就滚动到事件1那个地方

2013-05-31 23:00 回复本帖

0

lwj4755

潇潇发表于 2013-5-31 12:24 forum.php?mod=redirect&goto=findpost&pid=19740&ptid=6812
[html]

谢谢你哦！可惜写错了方向应该是点导航事件1然后页面就滚动到事件1那个地方

2013-05-31 23:01 回复本帖

0

hforlove

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{ padding:0; margin:0;}
div{ height:500px; background:#ccc; margin:10px 0; font-size:300px; text-align:center; line-height:500px;}
ul{ overflow:hidden; height:50px; position:fixed; top:0px; left:0; background:#993399; width:100%;}
li{ list-style:none; width:100px; height:50px; text-align:center; line-height:50px; font-size:50px; float:left; border-right:1px solid #ccc; cursor:pointer;}
.active{ background:#fff;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var pos=[];
var btn=true;

$('li').each(function(i) {
pos[i]=$('div').eq(i).offset().top;
$(this).click(function(){
btn=false;
$('li').removeClass('active');
$(this).addClass('active');
$('html,body').stop().animate({scrollTop:pos[i]},'slow',function(){btn=true;})
})
});

$(document).scroll(function(){
var top=$(document).scrollTop();
$('li').each(function(i) {
if(top>=pos[i]){
if(btn){
$('li').removeClass('active');
$(this).addClass('active');
}
}
});
})

})
</script>
</head>

<body>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>
[/html]

2013-06-01 14:14 回复本帖

0

创美易-miaov

无为老师，锚点平滑效果可以出一期视频吗？？我还是不能理解其中原理，真心希望有一期这个效果的视频。技术之夜快点出-锚点平滑效果的视频吧。

2013-06-03 13:57 回复本帖

0

无为

写了一个类似的：

[html]<!DOCTYPE html>
<html>
<head>
<title> 妙味课堂 -- 吸顶导航 </title>
<meta charset = 'utf-8' />
<style>
body {margin: 0;}
#top {width: 980px; height: 300px; background: #ccc; margin: 0 auto;}
#center {width: 980px; margin: 0 auto;}
#nav {width: 980px; height: 30px; margin: 0 auto; padding: 0; position: relative; top: 0px;}
#nav li {list-style: none; width: 243px; height: 38px; background: #9cf; float: left; text-align: center; line-height: 40px; border: 1px solid #555;}
#nav li.active {background: pink;}
#center div {height: 800px; background: #888;}

#footer { width: 980px; margin: 0 auto; text-align: center; font-size: 14px; color: #333; line-height: 28px; font-family: arial; word-spacing: 8px; padding: 15px 0; background: #eee;}
#footer a { color: #333; text-decoration: none; }
#footer a:hover { text-decoration: none; position: relative; top: 1px; border-bottom: 1px solid #555; }
#footer span { font-size: 12px; display: block;}    </style>
</head>

<body>
<div id="top"></div>
<ul id="nav">
<li class="active">妙味首页</li>
<li>妙味视频</li>
<li>妙味特效</li>
<li>妙味菜馆</li>
</ul>
<div id="center">
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
<div id="footer">
<a href="http://www.miaov.com/index.html.php">首页</a> |
<a href="http://www.miaov.com/course.html.php">课程设置</a> |
<a href="http://www.miaov.com/data.html.php">视频教程</a> |
<a href="http://www.miaov.com/about.html.php">关于我们</a> |
<a href="http://www.miaov.com/contact.html.php">联系我们</a> |
<a href="http://www.miaov.com/message.html.php">在线留言</a> |
<a href="http://www.miaov.com/job.html.php">加入我们</a> |
<a href="http://www.miaov.com/message.html.php">常见问题</a> |
<a href="http://www.miaov.com/site_map.html.php">网站地图</a>
<span>京ICP备08102442号 2010.<a href="index.html.php">miaov.com</a> 版权所有</span>    </div>
</body>
</html>

<script>

var oCen = document.getElementById('center');
var aDiv = oCen.getElementsByTagName('div');
var oNav = document.getElementById('nav');
var aLi = oNav.getElementsByTagName('li');

var aColor = ['#eee','#888'];
var iDivH = 800;

for(var i=0; i<aDiv.length; i++){
aDiv[i].style.background = aColor[i%aColor.length];
}

for(var i=0; i<aLi.length; i++){

aLi[i].index = i;
aLi[i].onclick = function(){

var iTop = this.index > 0 ? 260 : 300;
startMove(document,{scrollTop: iDivH*this.index+iTop});

};

}

window.onscroll = function(){

var iNum = Math.floor((scrollY()-260)/iDivH);

if(scrollY()>300){

oNav.style.position = 'fixed';
oNav.style.left = (viewW() - oCen.offsetWidth)/2 + 'px';

for(var i=0; i<aLi.length; i++){
aLi[i].className = '';
}
aLi[iNum].className = 'active';

}else{

oNav.style.position = 'relative';
oNav.style.left = '0px';

}

};

function viewH(){
return document.documentElement.clientHeight;
}

function viewW(){
return document.documentElement.clientWidth;
}

function scrollY(){
return document.body.scrollTop || document.documentElement.scrollTop;
}

function startMove(obj,json,endFn,n){
clearInterval(obj.timer);

obj.timer=setInterval(function(){
doMove(obj,json,endFn,n);
},30);
}

function doMove(obj,json,n,endFn){
var iCur=0;
var bStop=true;
var n = n || 15;

for(var attr in json){
if(attr=='opacity'){
iCur=Math.round(getStyle(obj,attr)*100);
}else if(attr=='scrollTop'){
iCur=scrollY();
}else{
iCur=parseInt(getStyle(obj,attr))||0;
}

var iSpeed=(json[attr]-iCur)/n;
iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if(iCur!=json[attr]){
bStop=false;
}

if(attr=='opacity'){
obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
document.title=iCur+iSpeed;
}else if(attr=='scrollTop'){
document.body.scrollTop = document.documentElement.scrollTop = iCur+iSpeed;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
}

if(bStop){
clearInterval(obj.timer);
if(endFn){
endFn.call(obj);
}
}

}

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

</script>
[/html]

2013-06-03 18:41 回复本帖

0

无为

创美易-miaov 发表于 2013-6-3 13:57 forum.php?mod=redirect&goto=findpost&pid=19796&ptid=6812
无为老师，锚点平滑效果可以出一期视频吗？？我还是不能理解其中原理，真心希望有一期这个效果的视频。技术 ...

上面提供了一个类似的效果，技术分享之夜的活动不是我们主办的，我们只是应邀方而已。分享的内容也早就已经定下来了，在码农俱乐部官网上可以查看到。

2013-06-03 18:44 回复本帖

0

衣沾不足惜

潇潇 2013-05-31 12:24发表的内容:

[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
body{}
#container{ width:1000px;height:3000px; margin:0 auto; padding:0 10px; position:relative;border:1px solid #eee; }
#div1{width:500px;height:30px; background:#747474;position:absolute;top:200px; border:1px solid red;}
#div1 ul{ list-style:none;}
#div1 li{float:left;padding:4px; border:1px solid #ccc;}
#div1 li.active{ background:green; color:red;}
#fn1,#fn2,#fn3,#fn4{width:100px;height:30px;background:#ccc;border:1px solid #131313;}
#fn1{position:absolute;top:700px;}
#fn2{position:absolute;top:1000px;}
#fn3{position:absolute;top:1300px;}
#fn4{position:absolute;top:1500px;}
</style>
<script type="text/javascript">

window.err=function(){

var oFn1=document.getElementById("fn1");
var oFn2=document.getElementById("fn2");
var oFn3=document.getElementById("fn3");
var oFn4=document.getElementById("fn4");
var oDiv=document.getElementById("div1");
var aLi=oDiv.getElementsByTagName("li");
var arr=[];
arr.push({top:oFn1.offsetTop,left:oFn1.offsetLeft});
arr.push({top:oFn2.offsetTop,left:oFn2.offsetLeft});
arr.push({top:oFn3.offsetTop,left:oFn3.offsetLeft});
arr.push({top:oFn4.offsetTop,left:oFn4.offsetLeft});
arr.push({top:oDiv.offsetTop,left:oDiv.offsetLeft});
window.onscroll=function(){
var iScrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
scrollFixed(iScrollHeight);
show(iScrollHeight);
function scrollFixed(num){

  if(num>arr[4].top){
    oDiv.style.position="fixed";
    oDiv.style.top="0";
    oDiv.style.zIndex=999;
    }else{
    oDiv.style.position="absolute";
    oDiv.style.top=arr[4].top+"px";
    }
}
function show(num){
   var arrtemp=[];
    for(var i=0;i<aLi.length;i++){
         if(num>arr[i].top){
            arrtemp.push(i)
            }
        }
    var iMax=arrtemp[arrtemp.length-1];
    for(var i=0;i<aLi.length;i++){
        for(var j=0;j<aLi.length;j++){
            aLi[i].className="";
            }
        aLi[iMax].className="active";
        }
}

};
};
</script>
</head>

<body >
<div id="container">
<div id="div1">
<ul>
<li>事件1</li>
<li>事件2</li>
<li>事件3</li>
<li>事件4</li>
</ul>
</div>
<div id="fn1">事件1</div>
<div id="fn2">事件2</div>
<div id="fn3">事件3</div>
<div id="fn4">事件4</div>
</div>
</body>
</html>[/html]
写了一个，布置是不是你要的

可以

2018-03-19 18:33 回复本帖

0

妙味用户806814

这里有一个 demo ，用了 tween.js 实现的锚点掌滑动效果棒棒的 http://yunkus.com/front-end-web-develoment/

2018-03-24 00:13 回复本帖