在同一页面和另一页面上设置动画jquery

时间:2016-10-19 06:49:18

标签: jquery jquery-animate

在同一页面和另一页面上动画jQuery。

var jump=function(e)
{

       if (e){
           var $height = -100;
           e.preventDefault();
           var target = $(this).attr("href");
       }else{

           var $height = 300;
           var target = location.hash;
       }

       $('html, body').animate({

           scrollTop: $(target).offset().top + $height
       },1500,function()
       {
           location.hash = target;
       });
}

$(document).ready(function(e) {
     $('.navbar-nav .menu-item-type-custom a[href^=#], .offer-sidebar .menu-item-type-custom a[href^=#]').bind("click", jump);
     if (location.hash){
        setTimeout(function(){
            window.scrollTo(0, 0); 
            $('html, body').scrollTop(0).show()
            jump()
        }, 1);
    }
}); 
 <div class="nav">
         <a href="http://www.exmaple.com/"> Home </a>
         <a href="http://www.exmaple.com/contact"> Contact </a> 
         <a href="#footer"> Footer </a> // working fine
         <a href="http://www.exmaple.com/#aboutus"> About us </a> // Not work
   </div>

在主页上,aboutus将在同一页面上向下滚动关于我们的部分(不工作)和On Contact页面上它正常工作并跳转到主页滚动到关于我们部分。 任何人都可以帮助在同一页面和另一页上使用完整的网址吗?

1 个答案:

答案 0 :(得分:0)

在锚名称

之前不需要<div id="footer">Footer</div>

使用

创建锚点
<a href="http://www.exmaple.com#footer">Footer </a> // will work

稍后再参考

Theme