网站滚动问题
网站滚动问题
提问于 2016-07-19 18:39:59
我在我的网站上滚动时遇到了一些问题。似乎当你点击链接时，它们会转到正确的页面，但如果你随后尝试上下滚动，它就会跳到顶部。
例如，在我的页面上，如果你点击“开始你的冒险”，然后向上滚动，它就会跳转。图像链接也是如此。
我尝试在我的站点上添加jquery平滑滚动https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js，然后添加以下JS：
$(document)
.on('click', 'a[href*="#"]', function() {
if ( this.hash && this.pathname === location.pathname ) {
$.bbq.pushState( '#/' + this.hash.slice(1) );
return false;
}
})
.ready(function() {
$(window).bind('hashchange', function(event) {
var tgt = location.hash.replace(/^#\/?/,'');
if ( document.getElementById(tgt) ) {
$.smoothScroll({scrollTarget: '#' + tgt});
}
});
$(window).trigger('hashchange');
});我不介意平滑的滚动不起作用，只要用户可以正确地滚动而不跳转就好了
回答 2
Stack Overflow用户
发布于 2016-07-19 18:53:28
尝试此解决方案...
删除smoothScroll插件并尝试使用下面的代码..
将“内部链接”类添加到目标锚点。
$('.inner-link').on('click', function(e) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});Stack Overflow用户
发布于 2016-07-19 20:12:19
我将删除该插件，并使用以下jQuery：
(function (jQuery) {
jQuery.mark = {
jump: function (options) {
var defaults = {
selector: 'a.scroll-on-page-link'
};
if (typeof options == 'string') {
defaults.selector = options;
}
options = jQuery.extend(defaults, options);
return jQuery(options.selector).click(function (e) {
var jumpobj = jQuery(this);
var target = jumpobj.attr('href');
var thespeed = 1000;
var offset = jQuery(target).offset().top;
jQuery('html,body').animate({
scrollTop: offset
}, thespeed, 'swing');
e.preventDefault();
});
}
};
})(jQuery);
jQuery(function(){
jQuery.mark.jump();
});然后，对于任何想要平滑滚动的链接，添加类scroll-on-page-link。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38456180
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号