Question

我正在尝试创建一个滚动圈子来浏览我页面的每个部分，如下所示：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/

有什么想法吗？

Answer 1

基本上，创建一个固定位置的圆圈。在你的IMG / DIV标签上，添加一个类＆＃34;滚动＆＃34;它。然后将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>

滚动右侧的圆形条？

1 个答案: