https://dconc.gov/Commonscripts/NWS/Modules.CommonScripts/NWS.Display.SmoothAnchors.js

1// If this moves into base and needs to keep the same naming pattern used by base, this alias could be added:
2// NWS.initNamespace('NWS.Display.InitSmoothAnchors', NWS.Display.SmoothAnchors.init);
3
4/* - named anchors --------------------------------------------------------- */
5NWS.initNamespace('NWS.Display.SmoothAnchors',function(){
6
7    // Private variable for this namespace
8    var _params;
9
10	function setClickHandler(exceptions){
11		$('a[href*="#"]').on('click',function(e){
12			if($(this).attr('href') == '#' || $(this).is(exceptions) )
13				return;
14			if(location.pathname.replace(/^\//,'') != this.pathname.replace(/^\//,'') && location.hostname != this.hostname)
15				return;
16			animatedScrollToTarget(getHashTarget(this.hash), "html,body", { scrollOffset:  getPageTopDifference() }, 
17				function(targetSelector, scrollContainerSelector, options){
18					adjustForHeaderChange(targetSelector, scrollContainerSelector, options) 
19				}
20
21			);
22		});                       
23	}
24	
25	function scrollOnPageLoad(){
26		setTimeout(function() { 
27							animatedScrollToTarget(getHashTarget(location.hash), "html,body", { scrollOffset:  getPageTopDifference() }, 
28								function(targetSelector, scrollContainerSelector, options){
29									adjustForHeaderChange(targetSelector, scrollContainerSelector, options) 
30								}
31						) }, 500);
32	}
33	
34	function adjustForHeaderChange(targetSelector, scrollContainerSelector, options) {
35		_params.pageTopVariableHeight = $(_params.fixedHeader).outerHeight();
36		if(options.scrollOffset != getPageTopDifference())
37			animatedScrollToTarget(targetSelector, scrollContainerSelector, { scrollOffset:  getPageTopDifference(), scrollSpeed:0 });
38	}
39	
40	function getHashTarget(hash) {
41		if (hash == '')
42			return;
43		
44		if ($('a[name=' + hash.slice(1) +']').length)
45			return 'a[name=' + hash.slice(1) +']';
46		else
47			return '[id=' + hash.slice(1) +']';
48	}
49	
50	function getPageTopDifference() {
51			if($(_params.fixedHeader).css('position') != 'fixed')
52				return  _params.pixelDifference;
53			else if (typeof(_params.pageTopHeight) === 'undefined')
54				return _params.pageTopVariableHeight + _params.pixelDifference;
55			else
56				return _params.pageTopHeight + _params.pixelDifference;
57	}
58	
59	function animatedScrollToTarget(targetSelector, scrollContainerSelector, options, callback){			
60			let scrollOffset = 0, scrollSpeed = _params.scrollSpeed;
61			let target = $(targetSelector);
62			if(target.length == 0)
63				return;
64			
65			if(typeof(options) !== "undefined")
66			{
67				if(typeof(options.scrollOffset) !== "undefined")
68					scrollOffset = options.scrollOffset;
69				if(typeof(options.scrollSpeed) !== "undefined")
70					scrollSpeed = options.scrollSpeed;				
71			}
72			if(typeof(scrollContainerSelector) !== "undefined")
73				scrollContainerSelector = "html,body";
74			
75				// expand details element if anchor is inside it - needed for mobile browsers
76				if ($(targetSelector).length){
77				  if ($(targetSelector).is(":hidden")) {
78					let details = $(targetSelector).closest("details");
79					if (details) {
80						details.prop("open", true);
81					}
82				  }
83				}
84			$(scrollContainerSelector).animate({
85				 scrollTop: target.offset().top - scrollOffset
86			}, scrollSpeed, function(){ 
87					if(typeof(callback) === "function")
88						callback(targetSelector, scrollContainerSelector, options) 
89					});
90	}	
91
92	return {
93        /**
94         * @param {Object} params - An object containing the parameters
95         * @param {Object} params.getHashTarget - Optional. A function used to get the target of a hash. This example will look for any element with an ID matching the hash (instead of looking for a named anchor): init({ getHashTarget: function(hash) { return $('[id=' + hash.slice(1) +']'); } });
96         * @param {string} params.fixedHeader - Optional. Default value is '#pageTopArea'
97         * @param {string} params.scrollSpeed - Optional. Default value is 500.
98         * @param {string} params.pageTopHeight - Optional. Default value is the height of the fixed header.
99         * @param {string} params.pixelDifference - Optional. Default value is 0
100         */
101		init: function (params) {
102			_params = params;
103			
104			if (typeof(_params.fixedHeader) === 'undefined')
105				_params.fixedHeader = '#headerArea';
106			if (typeof(_params.scrollSpeed) === 'undefined')
107				_params.scrollSpeed = 500;
108			if (typeof(_params.pageTopHeight) === 'undefined')
109				params.pageTopVariableHeight = $(params.fixedHeader).outerHeight();
110			if (typeof(_params.pixelDifference) === 'undefined')
111				_params.pixelDifference = 15;
112			if (typeof(_params.getHashTarget) === 'undefined')
113				_params.getHashTarget = getHashTarget;
114
115			setClickHandler(_params.exceptions);
116			scrollOnPageLoad();
117		}
118	};
119});