使用动画平滑过渡到锚点的jQuery代码

不懂js但又只有js代码才能解决我遇到的问题😭,所以步伐就停了下来。搜索了很久,尝试了很多方法,很多都没有用的,或者说不适合我这个网站的或者不适合我的网站的主题…不知道怎么说。

我想实现的效果就是:在BuddyPress群组主页里面,点击导航菜单上的版块,页面跳转后定位至#bbpress-forums这个元素的位置。这是改善手机浏览群组时的体验。

因为手机浏览群组主页时,站点主菜单与群组封面图占据了一半过的位置,群组主页的群组导航菜单显示在屏幕底部了。因此点击版块,第一屏内容无法显示出版块的内容,需手动滑动屏幕下拉页面才能看到版块的内容。

也就是点击版块页面跳转后定位至#bbpress-forums这个元素的位置。如下图

实现方法:

最开始使用location.hash=”#bbpress-forums”来实现自动定位。
写到群组主页的php模板里面。(因为我仅需在群组页实现此跳转的功能)
翻开本地buddypress模板目录,找到\bp-templates\bp-legacy\buddypress\groups\single\home.php。直接写js代码如下图:

以上的代码,也是测试了很久、很多代码片段才成功的啦!😥

后来觉得是不是加入动画平滑过渡到锚点,效果应该要好很多。因此又不断的尝试,不断的测试,把原来的location.hash=”#bbpress-forums”实现方法删除掉。使用以下我觉得应该更好的方法吧。

改进了js脚本如下:

	if ( jQuery(window).width() < 800 ) { // 1.1:检测屏幕分辨率如果小于800px,执行以下代码,否则执行2.1步骤代码。
		
		if (jQuery('#item-body #bbpress-forums').length > 0) { // 1.2:检测#item-body #bbpress-forums元素存在,执行以下代码,元素不存在将不执行。
			
			if (jQuery('#wpadminbar').length > 0) { // 1.3:检测#wpadminbar元素存在,执行以下代码,否则执行1.7步骤代码。
				
				jQuery("html, body").animate({ // 1.4:使用动画效果,平滑过渡到#item-nav元素。
							
					scrollTop: jQuery("#item-nav").offset().top - 46 //1.5:减去46px是由于#wpadminbar元素position: fixed;height: 46px;
					
				}, 650); // 1.6:这个是650毫秒内,完成由顶部平滑过渡到#item-nav元素的位置所用的时间。
						
			} else { // 1.7:#wpadminbar元素不存在,执行以下代码。
			
					jQuery("html, body").animate({ // 1.8:使用动画效果,平滑过渡到#item-nav元素。
								
						scrollTop: jQuery("#item-nav").offset().top // 1.9:这里直接定位到#item-nav元素,因为#item-nav元素之上没有使用position: fixed;定位的元素。
						
					}, 650); //1.9:这个是650毫秒内,完成由顶部平滑过渡到#item-nav元素的位置所用的时间。
			
				}
			
		}
		
	} else { //2.1:屏幕分辨率大于800px,执行以下代码。
		
			if (jQuery('#item-body #bbpress-forums').length > 0) {
				
				if (jQuery('#wpadminbar').length > 0) {
				
					jQuery("html, body").animate({
						
						scrollTop: jQuery("#item-nav").offset().top - 93
						
					}, 650);	
					
				} else {
				
						jQuery("html, body").animate({
							
							scrollTop: jQuery("#item-nav").offset().top - 60
							
						}, 650);
					
					}
			}
		}

这个代码是写在主题的js文件里面的,这样网址后面就不会出现#***的后缀了。

这个js代码对于我来说,真的来之不易了,由于太多的不懂,陆续花了差不多1天的空余时间去测试,所以才显得来之不易😄

发表评论

电子邮件地址不会被公开。 必填项已用*标注