在滚动包含<a href="" element="" to="" navigate="" to="" div="" in="" a="" page=""

时间:2018-04-27 22:23:05

标签: javascript jquery html css

="" is there a way to do a box that contains anchor href elements to link to specific div in a page that will follow the scroll bar ? any help please? I have tried to do this but it didn't scroll on all the page it is fixed.

       <div id="sidebar">

        <ul>
            <li><a href="#d1">jQuery (animated)</a></li>
            <li><a href="#d2">CSS (fixed)</a></li>
            <li><a href="#d3">CSS (reveal)</a></li>
        </ul>
    </div>
         <form id="form2" runat="server">


    <a href="#" id="scrlBotm" class="follow-scroll" style="margin-left:95%; color:white;"><img src="arrow_down.png"></a>
<h1 style="text-align:center;" id="Patient" runat="server" ></h1>
<h2 style="text-align:center;">Step 1/10</h2>
<div id="d1">
<ul class="form-style-1">
<li id="d1"><label>Nom du Patient<span class="required">*</span></label><input type="text" runat="server" name="Name" id="Name" class="field-long" placeholder="First" /></li>



    <li id="d2">
    <label>Username &emsp; &emsp; &emsp; &emsp; Password <span class="required">*</span></label>
    <input type="text" runat="server" name="Username" id="Username" class="field-short" placeholder="Username" />
     &nbsp;
    <input type="text" runat="server" name="password" id="password" class="field-short"  placeholder="Password" />
</li>

   </ul>
    </form>

my j query :

            <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
    $(function () {
        var offset = $("#sidebar").offset();
        var topPadding = 15;
        $(window).scroll(function () {
            if ($(window).scrollTop() > offset.top) {
                $("#sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
</script>

0 个答案:

没有答案