Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
251 views
in Technique[技术] by (71.8m points)

单页整站导航点击滚动的代码有现成的库吗?

要做个单页的网站,在点击导航的时候网页自动定位滚动到相应内容是怎么实现的? 有没有这样的JS库?

刚搜了一下很多都是类似swiper.js的效果,都是整屏滚动切换的。

我需要类似锚点效果一样,滚动到相应位置,不是全屏都切换。

求推荐。

运行到这句的时候报错,说没有top这个属性,这是哪的问题?
clipboard.png

调试了一下,发现$(target).data("to");的值没有获取到,然而我加了data属性啊。

<a href="#" data-to="dvAboutUs">

搞定了
<span><img data-to="dvAboutUs" src="images/mainUI/navItem4.gif" /></span>

调试时候发现虽然我监听的a标签,可点击事件里的target是img,于是把data属性放到图片里就好了。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

导航

<div class='nav-left'>
    <div data-to='content1'><div>
    <div data-to='content2'><div>
<div>

内容

<div class='content1'>
<div class='content2'>

js

$('.nav-left').on('click','div',function(e){
            //console.log(e);
            var target = e.target;
            var div = $(target).data("to");
            //console.log(div);
            
            $('html,body').animate({scrollTop:$('.'+div).offset().top}, 800);
        });

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...