单击菜单链接从一个div移动到另一个

Question

嘿家伙我想在我的网站上制作动画效果，当我们点击菜单链接（比如关于部分）时，它会动画到该div视差风格。

所以，如果你知道任何可以帮助我的jquery插件，那么请让我知道，如果你向我展示一个例子，会更好。

看到代码的帮助：

.Home-section { 
 
    height: 500px; 
 
    background: deepskyblue; 
 
} 
 
.About-section { 
 
    height: 300px; 
 
    background: deeppink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 
<a href="#">Home</a> 
 
<a href="#">About</a> 
 

 
<div class="Home-section"> 
 
    <h1> Hello </h1> 
 
</div> 
 

 
<div class="About-section"> 
 
    <h1>Bye</h1> 
 
</div>

因此，根据该代码我想动画到关于截面上点击该链接，说明关于

上

Answer 1

希望你想要这个。由于

// handle links with @href started with '#' only 
 
$(document).on('click', 'a[href^="#"]', function(e) { 
 
    // target element id 
 
    var id = $(this).attr('href'); 
 

 
    // target element 
 
    var $id = $(id); 
 
    if ($id.length === 0) { 
 
     return; 
 
    } 
 

 
    // prevent standard hash navigation (avoid blinking in IE) 
 
    e.preventDefault(); 
 

 
    // top position relative to the document 
 
    var pos = $(id).offset().top - 10; 
 

 
    // animated top scrolling 
 
    $('body, html').animate({scrollTop: pos}); 
 
});

.Home-section { 
 
    height:500px; 
 
    background: deepskyblue; 
 
    } 
 

 
.About-section { 
 
    height:300px; 
 
    background:deeppink; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#home">Home</a> 
 
<a href="#about">About</a> 
 

 
<div class="Home-section" id="home"><h1> Hello </h1> 
 
    </div> 
 

 
<div class="About-section" id="about"><h1>Bye</h1> 
 
    </div>

Answer 2

为了获得更多的像的视差效果，你可以添加background-attachment: fixed;

.About-section { 
    height: 300px; 
    background: url('http://lorempicsum.com/futurama/627/200/3') no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
} 

Like this

注意：我用@sagar kodte JS代码对动画有好处。

Answer 3

请尽量将

.Home-section { 
    height:500px; 
    background: deepskyblue; 
    } 

.About-section { 
    height:300px; 
    background:deeppink; 
    } 
a{cursor:pointer} 

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $("a").click(function() { 
    var ourclass = $(this).attr('class'); 
$('html, body').animate({ 
scrollTop: $("#"+ourclass).offset().top-10 
}, 2000); 
}); 
}); 
</script> 
<a class="home">Home</a> 
<a class="about">About</a> 
<div class="Home-section" id="home"><h1> Hello </h1></div> 
<div class="About-section" id="about"><h1>Bye</h1></div> 

也js fiddlde here

Answer 4

.Home-section { 
 
    height: 500px; 
 
    background: deepskyblue; 
 
} 
 
.About-section { 
 
    height: 300px; 
 
    background: deeppink; 
 
}

<a href="#home">Home</a> 
 
<a href="#about">About</a> 
 

 
<div class="Home-section" id="home"> 
 
    <h1> Hello </h1> 
 
</div> 
 

 
<div class="About-section" id="about"> 
 
    <h1>Bye</h1>

试试这个。