jQuery Smooth Scroll to Top AND to Anchor by ID

时间:2016-06-20 20:58:52

标签: javascript jquery smooth-scrolling

我找到了将jQuery滚动添加到顶部或滚动到锚点的答案,但实际上并没有集成。所以希望可以在这里问一下。

我们有当前的jQuery函数为较长的页面添加滚动到顶部的锚点。它工作正常。

x ='Jos\xe9'
Encoding(x) <- 'latin1'
stri_trans_general(x, 'Latin-ASCII')
  • 如何修改它以允许使用ID(例如// Add To Top Button functionality jQuery(document).ready(function($){ // Scroll (in pixels) after which the "To Top" link is shown var offset = 700, //Scroll (in pixels) after which the "back to top" link opacity is reduced offset_opacity = 1200, //Duration of the top scrolling animation (in ms) scroll_top_duration = 700, //Get the "To Top" link $back_to_top = $('.to-top'); //Visible or not "To Top" link $(window).scroll(function(){ ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out'); if( $(this).scrollTop() > offset_opacity ) { $back_to_top.addClass('top-fade-out'); } }); //Smoothy scroll to top $back_to_top.on('click', function(event){ event.preventDefault(); $('body,html').animate({ scrollTop: 0 , }, scroll_top_duration ); }); }); )平滑滚动到页面上的锚点,而不会发生冲突?

TO CLARIFY:我们需要修改上面的脚本,或者一个不会与之冲突的全新脚本,这将为页面的现有HTML中找到的任何锚链接添加平滑滚动(例如,{{ 1}})。 JS应检测任何锚链接并为其添加平滑滚动功能。我们不会手动向JS添加特定的锚链接。

1 个答案:

答案 0 :(得分:0)

将滚动逻辑提取到自己的函数中,该函数接受元素的 function slider() { return { restrict: 'AE', transclude: true, templateUrl: 'my-template.html', controller: 'SliderCtrl', controllerAs: 'vm', bindToController: { show: '@', index: '@', scrollBy: '@' }, scope: {}, link: linkFunc }; function linkFunc($scope, $element, $attrs, ctrl, $transclude) { if (angular.isUndefined(ctrl.show)) { ctrl.show = 4; } else { ctrl.show = Math.abs(ctrl.show); } if (angular.isUndefined(ctrl.index)) { ctrl.index = 48; } else { ctrl.index = Math.abs(ctrl.index); } if (angular.isUndefined(ctrl.scrollBy)) { ctrl.scrollBy = 1; } else { ctrl.scrollBy = Math.abs(ctrl.scrollBy); } //wait for ng-repeat to be ready var unbind = $scope.$watch('vm.ready', function (newVal, oldVal) { if (newVal === true) { // active is a subarray of ctrl.items ctrl.active = []; //find subarray start, end indexes var start = ctrl.index + ctrl.show; var len = ctrl.items.length; //add items to the subarray for (var i = ctrl.index; i < start; i++) { ctrl.items[i%len].slide.active = true; ctrl.active.push(ctrl.items[i % len]); } //sort the sub array??? if (start >= len) { ctrl.active.sort(function (a, b) { return b.index - a.index; }); } unbind(); } }); } 作为参数。

id