-1

I am trying this code to implement but some how the code is not working,

In my HTML,

<ul id="menu1" class="menu1class">
    <li><a id="menuslide1">Home</a></li>
    <li><a id="menuslide2">About us</a></li>
    <li><a id="menuslide3">contact us</a></li>
    <li><a id="menuslide4">other Links</a></li>
</ul>

And also, i have this, 

           <div id="div1">Home details</div>
    <div id="div2">About us details</div>
    <div id="div3">Contact us details</div>
    <div id="div4">other link details</div>

I need to scroll down to my particular page, when the particular link is clicked.

I know i can use the base , but need to give some realistic animate changes. Can some one help, how this can be achieved using jquery animate function.

I tried the below but seems to be not working, 

            $('#menuslide2').click(function() {
            $("html, body").animate({scrollTo: 800 }, 500);
        });

Any Help? Thanks in advance...

4

2 回答 2

1

好吧，您正在询问非常简单的内部超链接。

<a href="#homesection">HOME</a>
<a href="#AboutUssection">About Us</a>
<a href="#Contactussection">Contact US</a>
<a href="#otherlinkssection">Other Links</a>



<div><a name="homesection">Home section Content Comes here..!!</a></div>

<div><a name="AboutUssection">AboutUs section Content Comes here..!!</a></div>

<div><a name="Contactussection">Contactus section Content Comes here..!!</a></div>

<div><a name="otherlinkssection">otherlinks section Content Comes here..!!</a></div>

但是这里不会有动画..!!

希望这对你有帮助

于 2013-05-16T07:10:10.013 回答
0

如果我没记错的话，你需要使用 jQuery 平滑滚动到内部链接。您可以这样使用代码：

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

您需要更改链接的 HTML：

<ul id="menu1" class="menu1class">
    <li><a id="menuslide1" href="#div1">Home</a></li>
    <li><a id="menuslide2" href="#div2">About us</a></li>
    <li><a id="menuslide3" href="#div3">contact us</a></li>
    <li><a id="menuslide4" href="#div4">other Links</a></li>
</ul>
于 2013-05-16T07:12:48.707 回答