跳轉到SPA中的HTML元素

當我需要用戶跳轉到HTML中的特定元素時，我通常只是在URL中傳遞一個hashtag，但在這種情況下，它是一個單頁應用程序（如AngularJS）所以使用hashtags來加載視圖。跳轉到SPA中的HTML元素

我有jQuery，但我無法弄清楚如何在用戶返回時跳到視圖中的特定元素。

我已經試過：

$('html, body').animate({ 
    scrollTop: $(".gallery .selected").offset().top 
}, 2000);

而且即使是簡單的：

var scrollPos = $(".gallery .selected").scrollTop(); 
$('html,body').scrollTop(scrollPos);

console.log(scrollPos)始終爲0，甚至scrollTop(500)不動滾動條。哎呀。

但它根本不動。（我想知道它是否可以看到這個元素。）

來源

2014-10-01 Chuck Le Butt

你有多少'.selected'元素？如果不止一個，那麼你想跳哪一個？ – 2014-10-01 09:17:38

如果你在SPA只是放鬆一下！開玩笑吧，你有測試頁嗎？你說「像AngularJS」。它是角度還是其他東西？ – 2014-10-01 09:17:40

我總是隻有一個匹配「.gallery .selected」的元素。 – 2014-10-01 09:18:41

它取決於你使用哪個mvc框架來創建你的spa如果你使用的是角度你可能更適合使用角度特定的命令，例如https://docs.angularjs.org/api/ng/service/ $ anchorScroll其他框架可能有其他的方法

來源

2014-10-01 09:19:49

我用：

function _ease(t, b, c, d) { 
    var ts = (t /= d) * t; 
    var tc = ts * t; 
    return b + c * (-1 * ts * ts + 4 * tc + -6 * ts + 4 * t); 
}; 

HTMLElement.prototype.scrollTopTo = function(a, f) { 
    var b = this.scrollTop, g = a - b, c = 0, d = a < b ? Math.abs(b - a) << 1 : Math.abs(a - b) << 1, h = this, e = function() { 
     c += 20; 
     var a = _ease(c, b, g, d); 
     h.scrollTop = a; 
     c < d ? setTimeout(e, 20) : f(); 
    }; 
    e(); 
}; 
HTMLElement.prototype.scrollTopToChild = function(el, callback) { 
    var bodyRect = this.getBoundingClientRect(), elRect = el.getBoundingClientRect(); 
    this.scrollTopTo(elRect.top - bodyRect.top, callback); 
};

希望這有助於。致電：

document.body.scrollTopToChild(document.getElementById('scrollToMe'),function() {alert('done')});

來源

2014-10-06 10:05:08

跳轉到SPA中的HTML元素

回答

相關問題