我正在横向滚动网站上工作
网站(蓝图)工作得很好,动画工作顺利,万事如意。
但是,如果我想在这种情况下添加window.location.hash
ba-hashchange
插件,则无效。
$(document).ready(function(){
$("nav").delegate("a", "click", function(event) {
window.location.hash = $(this).attr("href");
return false;
});
var newHash = "";
$(window).bind('hashchange', function(){
newHash = window.location.hash;
if (newHash) {
$('body,html').stop().animate({
scrollLeft: $(newHash).offset().left
}, 2500,'easeInOutExpo');
};
});
$(window).trigger('hashchange');
});
这里没有hashChange WITHOUT HASH EXAMPLE
的实例这里有hashChange WITH HASH EXAMPLE
基本上我想做的事情:
哈希发生了什么:
请帮我把动画偏移与hashchange结合起来。 谢谢!!
答案 0 :(得分:0)
试试这个
为所有主题添加一个类“ .scroll ”
示例:<a href="#main" class="scroll">Home</a>
$(document).ready(function(){
var newHash = "";
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 1500,function(){window.location.hash = "#"+trgt;});
return false;
});
});
答案 1 :(得分:0)
将ID更改为data-id并导航至不strid id
var adres = location.hash.substring(1);
if (newHash) {
$('html, body').stop().animate({
scrollTop: $("div[data-id='" + adres + "']").offset().top,
scrollLeft: $("div[data-id='" + adres + "']").offset().left
}, 1500,'easeInOutExpo');
}
祝你好运:)