jquery - 在右侧滚动圆圈条?

标签 jquery html css

我正在尝试创建一个滚动圆圈来导航我页面的每个部分,如下所示:http://goo.gl/kAhj8J

但是由于某些原因,我不知道如何使用 jQuery 启动它。

这是我的标记:

<section class="background-fixed img-1" >
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-2">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-3">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-4">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>

这是 JSFIDDLE:https://jsfiddle.net/prjo2ggv/1/

有什么想法吗?

最佳答案

基本上,创建具有固定位置的圈子。在您的 IMG/DIV 标签上,添加一个类“scroll”。然后将 Jquery 库和脚本添加到脚本的 HEAD 部分。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
           jQuery(document).ready(function($) {
                $(".scroll").click(function(event){     
                    event.preventDefault();
                    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
                });
            });
</script> 
</head>
<body>
//your circle 
<a href="example.com/index.php#page2" class="scroll">link</a>

//the place you want to scroll to
<div id="page2">
//your info
</div>
</body>
</html>

关于jquery - 在右侧滚动圆圈条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31084375/

相关文章:

Javascript/Jquery Timelime 插件

javascript - 当用户开始输入时如何清除表单的默认值(jquery)

javascript - 在子选项卡之间导航时,父 Controller 是否会再次重新初始化?

php - 仅使用 HTML 读取并显示服务器端文件的内容

javascript - 使用 javascript 在两种颜色之间切换的最佳方法?

javascript:如何防止滥用公共(public) api

javascript - 创建不连续的滚动框并测量每个部分的时间

javascript - 如何从 Internet Explorer 中删除共享点托管应用程序中的滚动条

javascript - 如何在鼠标悬停时在 HTML 标记中的文本周围显示 "box"?

css - 设置第二个背景图像?