10 examples of 'javascript scroll to element' in JavaScript

120
_scroll(x, y, callback) {
121
	// Guarantees:
122
	//  - x: number
123
	//  - y: number
124
	// => callback(err)
125
}

36
function scroll_to(delta) {
37
38
	if (delta < 0 ) {
39
40
		delta = -scrollinc;
41
	} else {
42
43
		delta = scrollinc;
44
	}
45
46
	delta = delta * deltaKoef;
47
48
	var listWidth = scroller.find('.dslca-section-scroller-content').width();
49
	var contentWidth = scroller.width();
50
51
	if ( listWidth <= contentWidth ) return false;
52
53
	var scrollMax = listWidth - contentWidth + 10;
54
55
	delta = parseInt(scrollInner.style.left || 0) - delta;
56
	delta = delta >= 0 ? 0 : delta;
57
	delta = delta <= -scrollMax ? -scrollMax : delta;
58
59
	scrollInner.style.left = delta + 'px';
60
}

88
function scrollHightlight(element) {
89
  var $headers = $(element);
90
91
  $(window).scroll(function() {
92
    var currentScroll = $(this).scrollTop();
93
    var $currentSection;
94
95
    $headers.each(function() {
96
      var divPosition = $(this).offset().top - 100;
97
      if (divPosition - 1 < currentScroll) {
98
        $currentSection = $(this);
99
      }
100
      if ($currentSection && $currentSection.attr('id')) {
101
        var id = $currentSection.attr('id');
102
      }
103
104
      $('.sidebar-header-2 a').removeClass('active');
105
      id = "'#" + id + "'";
106
      $('.sidebar-header-2 [href=' + id + ']').addClass('active');
107
    });
108
  });
109
}

154
async scrollIntoView(element) {
155
  await this.driver.executeScript('arguments[0].scrollIntoView(true);', element);
156
}

5
function scrollIntoView (element) {
6
  if (element){
7
    const scrollY = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
8
    window.scroll({ top: scrollY, left: 0, behavior: 'smooth' });
9
  }
10
}

78
function scrollIntoView(element) {
79
  var viewportTop = (document.body.scrollTop +
80
                      document.documentElement.scrollTop);
81
  var viewportHeight = window.innerHeight;
82
  var elementBox = element.getBoundingClientRect();
83
  var pixelsToOverlap = elementBox.bottom - elementBox.top + 8;
84
85
  var scrollTo;
86
  if (elementBox.top < 0) {
87
    scrollTo = viewportTop +
88
                pixelsToOverlap + elementBox.bottom - viewportHeight;
89
  } else if (elementBox.bottom > viewportHeight) {
90
    scrollTo = viewportTop + elementBox.top - pixelsToOverlap;
91
  } else {
92
    return;
93
  }
94
95
  scrollTo = Math.min(document.body.scrollHeight - viewportHeight,
96
                       Math.max(0, scrollTo));
97
  window.scroll(document.body.scrollLeft +
98
                document.documentElement.scrollLeft,
99
                scrollTo);
100
}

62
scroll(v) {
63
  const { el } = this;
64
  if (v !== undefined) {
65
    if (v.left !== undefined) {
66
      el.scrollLeft = v.left;
67
    }
68
    if (v.top !== undefined) {
69
      el.scrollTop = v.top;
70
    }
71
  }
72
  return { left: el.scrollLeft, top: el.scrollTop };
73
}

65
scroll(v) {
66
    const {el} = this;
67
    if (v !== undefined) {
68
        if (v.left !== undefined) {
69
            el.scrollLeft = v.left;
70
        }
71
        if (v.top !== undefined) {
72
            el.scrollTop = v.top;
73
        }
74
    }
75
76
    return {left: el.scrollLeft, top: el.scrollTop};
77
}

73
function scrollToElement(element) {
74
    
75
    if (isElementInView(element)) {
76
        return;
77
    }
78
    
79
    try {
80
        element.scrollIntoView({
81
            behavior: "smooth"
82
        });
83
    }
84
    catch (error) {
85
        console.error(error);
86
    }
87
}

251
function scrollToElement(element) {
252
    var currScrollY   = null;
253
254
    var targetScrollY = 0;
255
    var op = element;
256
    while (op.offsetParent !== null) {
257
        targetScrollY += op.offsetTop;
258
        op = op.offsetParent;
259
    }
260
261
    if (window.pageYOffset !== undefined) {
262
        currScrollY = window.pageYOffset;
263
    } else if (document.documentElement.scrollTop !== undefined) {
264
        currScrollY = document.documentElement.scrollTop;
265
    } else if (document.body.scrollTop !== undefined) {
266
        currScrollY = document.body.scrollTop;
267
    }
268
269
270
    if (currScrollY !== targetScrollY) {
271
        var maxTick  = 1;
272
        var interval = setInterval(function() {
273
            var sign = 1;
274
            if (currScrollY > targetScrollY) {
275
                sign = -1;
276
            }
277
            var scrollBy = sign * Math.ceil(Math.max(1, Math.min(maxTick, (Math.abs(targetScrollY - currScrollY) * 0.25))));
278
            currScrollY += scrollBy;
279
            window.scrollBy(0, scrollBy);
280
281
            if (currScrollY === targetScrollY) {
282
                clearInterval(interval);
283
            } else {
284
                maxTick = Math.min(maxTick + 0.5, Math.abs(targetScrollY - currScrollY));
285
            }
286
        }, 20);
287
    }//end if
288
}